Setup TypeScript with React
Prerequisites
You can use this cheatsheet for reference at any skill level, but basic understanding of React and TypeScript is assumed. Here is a list of prerequisites:
- Good understanding of React.
- Familiarity with TypeScript Basics and Everyday Types.
- Having read the TypeScript section in the official React docs.
- Having read the React section of the TypeScript playground.
This guide will always assume you are starting with the latest TypeScript and React versions. Notes for older versions will be in expandable <details>
tags.
VS Code Extensions
- Refactoring help https://marketplace.visualstudio.com/items?itemName=paulshen.paul-typescript-toolkit
- R+TS Code Snippets (there are a few...)
- TypeScript official extension https://code.visualstudio.com/docs/languages/typescript
- JavaScript and TypeScript Nightly https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next
React + TypeScript Starter Kits
Cloud setups:
- TypeScript Playground with React just if you are debugging types (and reporting issues), not for running code
- CodeSandbox - cloud IDE, boots up super fast
- Stackblitz - cloud IDE, boots up super fast
Local dev setups:
- Next.js:
npx create-next-app@latest --ts
will create in your current folder - Create React App:
npx create-react-app name-of-app --template typescript
will create in new folder - Vite:
npm create vite@latest my-react-ts-app -- --template react-ts
- Meteor:
meteor create --typescript name-of-my-new-typescript-app
- Ignite for React Native:
ignite new myapp
- TSDX:
npx tsdx create mylib
for Creating React+TS libraries. (in future: TurboRepo)
Other tools
Less mature tools still worth checking out:
- Snowpack:
npx create-snowpack-app my-app --template app-template-react-typescript
- Docusaurus v2 with TypeScript Support
- Parcel
- JP Morgan's
modular
: CRA + TS + Yarn Workspaces toolkit.yarn create modular-react-app <project-name>
Manual setup:
- Basarat's guide for manual setup of React + TypeScript + Webpack + Babel
- In particular, make sure that you have
@types/react
and@types/react-dom
installed (Read more about the DefinitelyTyped project if you are unfamiliar) - There are also many React + TypeScript boilerplates, please see our Other Resources list.
Video Tutorial
Have a look at the 7-part "React Typescript Course" video series below for an introduction to TypeScript with React.
