Setup TypeScript with React
Prerequisites
- 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 <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
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 -e with-typescript
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.
Import React
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:
Explanation
Why allowSyntheticDefaultImports
over 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!
Video Tutorial
Have a look at the 7-part "React Typescript Course" video series below for an introduction to TypeScript with React.
