TypeScript support using Babel 7

Created by: brunolemos

Adds TypeScript support.

Closes #4146 (closed) Closes #2815

The user can just rename .js to .tsx and it will work.

To enable type checking, the user needs to create a tsconfig.json file at the root directory and install the typescript fork-ts-checker-webpack-plugin dependencies. It will appear at the same console as the build one. Another option is to install only typescript and run npx tsc -w on a new terminal tab instead.

Includes

• Support .ts and .tsx file extensions
• Support type checking using fork-ts-checker-webpack-plugin (opt in)
• Support media imports json, bmp, gif, jpeg, jpg, png and svg
• Support typescript option on react-app babel preset to enable/disable @babel/preset-typescript (enabled by default, just like flow)
• Update docs
• Basic test

These items were included, but removed per review suggestion

• TSLint support using fork-ts-checker-webpack-plugin (https://github.com/facebook/create-react-app/pull/4837#discussion_r222292618, https://github.com/facebook/create-react-app/pull/4837#discussion_r223075439)
• ESLint support for TypeScript files using typescript-eslint-parser (https://github.com/facebook/create-react-app/pull/4837#discussion_r223351696)
• Support tsconfig.prod.json and tslint.prod.json (https://github.com/facebook/create-react-app/pull/4837#discussion_r222656827)
• Automatically enable flow or typescript presets by detecting .flowconfig and tsconfig.json
• Prevent enabling both flow and typescript in the same project

Pending suggestions (help wanted!)

• Fix build test not passing even though it's correct (https://github.com/facebook/create-react-app/issues/5440)
• Add more advanced tests
• Use async: true on type checking? (would need to fix errors not showing up) (it's ok for this first iteration)
• Make sure ESLint works great on tsx files
• Make sure there are no conflicts between typescript preset and flow plugin because both are being enabled together by default (none were found or reported by now)
• Automatically generate a tsconfig.json when typescript is imported for the first time?
• Check and force some tsconfig.json options like isolatedModules: true?
• Remove typescript dependency? (will probably need to change something on fork-ts-checker-webpack-plugin, because it isn't working without it)
• Re-run type checking after changing files that webpack is not watching? (https://github.com/facebook/create-react-app/pull/4837#issuecomment-427776703)
• Enable type checking on test files using ts-jest? (https://github.com/facebook/create-react-app/pull/4837#issuecomment-427776703) (no)

Screenshot

type TestType = 'a' | 'b'
const x: TestType = 123

How to try this PR while it's not merged

• Clone
  • git clone git@github.com:brunolemos/create-react-app.git
  • cd create-react-app
  • git checkout next-typescript
• Compile
  • yarn
• Create Link
  • cd packages/react-scripts/
  • yarn link
• Create New Project
  • cd ~/your/projects/folder
  • npx create-react-app app-name
  • cd app-name
• Use Link
  • yarn link react-scripts
• Setup TypeScript
  • Follow the steps from the readme: Adding TypeScript
• Finish
  • yarn start
  • Have fun with types 🎉