Skip to content
Permalink
main
Go to file
@sw-yx
Latest commit 9256f59 Oct 6, 2020 History
4 contributors

Users who have contributed to this file

@sw-yx @orta @raulfdm @glaschu1
66 lines (45 sloc) 4.36 KB
id title
setup
Setup TypeScript with React

Prerequisites

  1. good understanding of React
  2. familiarity with TypeScript Types (2ality's guide is helpful. If you’re an absolute beginner in TypeScript, check out chibicode’s tutorial.)
  3. having read the TypeScript section in the official React docs.
  4. 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:

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 for Creating React+TS libraries

Less mature tools still worth checking out:

Manual setup:

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!

You can’t perform that action at this time.