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 version. Notes for older versions will be in expandable <details>
tags.
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 - 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:
- Vite:
npm init vite-app my-react-project --template react-ts
(note - not yet v1.0, but very fast) - 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
import * as React from "react";
import * as ReactDOM from "react-dom";
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:
import React from "react";
import ReactDOM from "react-dom";
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!