Introduction
React is a JavaScript library use for building user interface.

TypeScript is a syntactic superset of JavaScript, this means typeScript adds syntax on top of JavaScript.

in this tutorial, I will discuss how to set up typeScript in a react project.

Prerequisite
if you are familiar with React and the basic of typescript, you are good to go.
check out my typescript cheatsheet part 1 writeup here TypeScript Cheatsheet Part 1

Getting started

if you are starting a new react project,

ensure you have node and npm installed in your system.
first of all, open your terminal and create a folder to work in

mkdir Reat-typscript-setup
cd Reat-typscript-setup

next, install your react typeScript project

npx create-react-app name-of-app --template typescript

or

yarn create react-app name-of-app --template typescript

its as simple as that, your react typeScript project should install and you are good to go.

if you already have an existing react project and you want to add typescript to the project, you simply install typeScript into the project. make sure you are in the project directory in you terminal, then install typeScript as seen below

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

Finally, rename all javaScript file to be a TypeScript file (e.g. src/App.js to src/App.tsx) and restart your development server!

you now have a fully typeScript project, but some type errors show up in the same console as the build one, correct these errors and continue your development.

Enjoy typing.