- 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 version. 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
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:
npm init vite-app my-react-project --template react-ts(note - not yet v1.0, but very fast)
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.