You already have running React app, and wanted to add TypeScript to it, Must of the cases, there is a high possibility of your app to break, unfortunately :( In this guide, I will show you how to add it with much work and your app will run perfectly without breaking.
Generating React App with TypeScript
npx create-react-app app-name --template typescript
or
yarn create react-app app-name --template typescript
Installing TypeScript to existing React project
First stop the running React app if it is running
Then run the following command in your Terminal (For Mac/Linux) or CMD (For PC)
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
or run
yarn add typescript @types/node @types/react @types/react-dom @types/jest
if you are using yarn
Now, try running the application with
npm start
or
yarn start
if it doesn't work, then you might need to delete your node_module folder and package-lock.json file, then install the dependencies again with
npm install
if you are using npm or
yarn add
if you are using yarn
Now, run the app again.
If still, it didn't work, then you need to generate tsconfig.json manually with
npx tsc --init
but you need to get TypeScript to install in your machine globally, if you don't, run
npm install -g typescript
or
yarn add typescript
Now, run the application. Wolla :) It works
Now you can change App.js or App.jsx to App.tsx
Immediately you do that, your app might break again, so start typing all your javascript or check out TypeScript official docs
Hola!
TypeScript is set, up and running, for full docs, visit Here to get started with Typescript
PLS: Leave a comment, or follower me on Twitter @NigerianCoder