- good understanding of React
- familiarity with TypeScript Types (2ality's guide is helpful. If you’re an absolute beginner in TypeScript, check out chibicode’s tutorial.)
- having read the TypeScript section in the official React docs.
- having read the React section of the new TypeScript playground (optional: also step through the 40+ examples under the playground's Examples section)
This guide will always assume you are starting with the latest TypeScript and React versions. Notes for older versions will be in expandable
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
React + TypeScript Starter Kits
- 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:
npx create-next-app -e with-typescriptwill create in your current folder
- Create React App:
npx create-react-app name-of-app --template typescriptwill create in new folder
npm create vite@latest my-react-ts-app -- --template react-ts
meteor create --typescript name-of-my-new-typescript-app
- Ignite for React Native:
ignite new myapp
npx tsdx create mylibfor Creating React+TS libraries. (in future: TurboRepo)
Less mature tools still worth checking out:
npx create-snowpack-app my-app --template app-template-react-typescript
- Docusaurus v2 with TypeScript Support
- JP Morgan's
modular: CRA + TS + Yarn Workspaces toolkit.
yarn create modular-react-app <project-name>
- Basarat's guide for manual setup of React + TypeScript + Webpack + Babel
- In particular, make sure that you have
@types/react-dominstalled (Read more about the DefinitelyTyped project if you are unfamiliar)
- There are also many React + TypeScript boilerplates, please see our Other Resources list.
This is the most futureproof way to import React. If you set
--allowSyntheticDefaultImports (or add
"allowSyntheticDefaultImports": true) in your
tsconfig.json you can use more familiar imports:
esModuleInterop? Daniel Rosenwasser has said that it's better for webpack/parcel. For more discussion check out https://github.com/wmonk/create-react-app-typescript/issues/214
You should also check the new TypeScript docs for official descriptions between each compiler flag!
Have a look at the 7-part "React Typescript Course" video series below for an introduction to TypeScript with React.