TypeScript support using Babel 7 by brunolemos · Pull Request #4837 · facebook/create-react-app

brunolemos · 2018-07-29T21:07:14Z

Adds TypeScript support.

Closes #4146
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~~ (TypeScript support using Babel 7 #4837 (comment), TypeScript support using Babel 7 #4837 (comment))
~~ESLint support for TypeScript files using typescript-eslint-parser~~ (TypeScript support using Babel 7 #4837 (comment))
~~Support tsconfig.prod.json and tslint.prod.json~~ (TypeScript support using Babel 7 #4837 (comment))
~~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 (Tests are using code from npm instead of code from pull request #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? (TypeScript support using Babel 7 #4837 (comment))
~~Enable type checking on test files using ts-jest? (TypeScript support using Babel 7 #4837 (comment))~~ (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 🎉

ianschmitz · 2018-07-30T01:48:48Z

One way to fix image imports TS error:

https://github.com/wmonk/create-react-app-typescript/blob/e4b1f9424fa14f7aae7f0cbf5fd64e18dd273527/packages/react-scripts/template/images.d.ts

However this doesn't take into account the recent improvements made in CRA 2.0 such as #3718

brunolemos · 2018-07-30T21:26:55Z

@iainbeeston thanks! I added an index.d.ts file fixing jpg, png and svg.
It also includes typings for the svg ReactComponent.

We currently only have one template folder so this way the index.d.ts will be available on non-typescript projects as well, not sure if that's a problem. Maybe it's a good thing, because it adds autocomplete to js projects as well.

frankwallis · 2018-08-13T09:29:38Z

@@ -0,0 +1,12 @@
+declare module '*.jpg'


I don't think this file should be called index.d.ts as this name will conflict with the automatically generated typings file for index.ts. In my projects I normally call this file externals.d.ts or similar but I don't really mind what it is called.

frankwallis · 2018-08-13T09:32:36Z

+declare module '*.png'
+
+declare module '*.svg' {
+  import * as React from 'react'


To be consistent with index.js this should be import React from 'react'. This does assume that esModuleInterop: true is specified in tsconfig.json but I think this is best practice for new projects as it means that typescript and babel are more closely aligned.

frankwallis · 2018-08-13T09:32:41Z

+declare module '*.svg' {
+  import * as React from 'react'
+
+  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>


I'm interested to know why this is needed?

frankwallis · 2018-08-13T09:34:28Z

@@ -1,5 +1,7 @@
+import 'jest';


An alternative to adding this import is to add types: [ 'jest' ] to tsconfig.json

I don't believe either should be needed. Typescript should pick up the node_modules/@types definitions automatically without any extra effort.

frankwallis · 2018-08-13T09:40:01Z

+```json
+{
+  "compilerOptions": {
+    "target": "ESNEXT",


nit: capitalization

Jessidhia · 2018-10-16T01:59:16Z

enums do work with babel, you just can't declare the same enum multiple times in the same scope. With tsc, those two enums would get merged, but with babel, they're new declarations and one would override the other.

const enums can't be supported because const enums only exist as a type.

GeeWee · 2018-10-16T05:20:45Z

Just throwing in my two cents as a ts-jest maintainer:

Most of the features Babel doesn't support aren't very widely used (we didn't support them for a long time and got very few issues)

If you decide to use ts-jest for testing you'll:
A) gain access to some test fee helpers that e.g. creates types for mocked objects
B) Get the "real" ts experience (we run a full language server)
C) An inconsistent experience. You face the potential of something working in tests but not when launching the app. (Though this can be mitigated by some ts-jest options)

I'd probably just use Babel

DanielRosenwasser · 2018-10-16T05:39:11Z

TypeScript PM here. Broadly speaking, I feel that

namespaces are not a huge loss; the React community is firmly on-board with ES modules anyway, and that's the direction the TypeScript world is taking.
const enums are often misused. Sure, they can be great for the internals of a library to get some speed improvements, but they generally shouldn't be used outside of that scope.
Merging behavior is marginally useful now that TypeScript 3.1 has the ability to tack properties onto functions. The fact that enums merge is also something I've never seen used out in the wild.

Anyway, @RyanCavanaugh might have some thoughts here too.

jleck · 2018-10-16T13:37:13Z

Hi all,

I was looking moving over to this from react-scripts-ts, but I have an issue around paths. In my tsconfig I have the following:

"compilerOptions": {
        ...
        "paths": {
            "@components/*": ["components/*", "core/src/components/*"],
        }
},

I.E. aliases with multiple paths. Unfortunately babel-plugin-module-resolver doesn't seem to support arrays as aliases, so I can't get my project working.

Not a showstopper for most people, but could cause some issues.

afarmerdev · 2018-10-17T17:50:49Z

namespaces are not a huge loss; the React community is firmly on-board with ES modules anyway, and that's the direction the TypeScript world is taking.

@DanielRosenwasser do we still have "global namespace" where types added automatically from definition-only files? So we don't need to "virtual import" those types everywhere.

DanielRosenwasser · 2018-10-19T01:22:32Z

@Serguzest can you give an example of what scenario you have in mind here?

afarmerdev · 2018-10-19T10:33:19Z

@Serguzest can you give an example of what scenario you have in mind here?

@DanielRosenwasser

src/models.ts

interface user {
  name: string;
}

src/someDirectory/someOtherFile.tsx

import * as React from "react";

//I don't need to explicitly import "user" type to able to use it in here
const user: user = {
  name: "ahmet"
};

samuelcastro · 2018-10-19T21:37:30Z

Any thoughts when are we going to get this through?

samuelcastro · 2018-10-19T22:37:29Z

@brunolemos I saw that these items were removed:

TSLint support using fork-ts-checker-webpack-plugin
ESLint support for TypeScript files using typescript-eslint-parser

Any reasons why? Which one should we use, would tslint make more sense since it's typescript? And last, how to use it with tslint?

brunolemos · 2018-10-20T11:52:19Z

@samuelcastro: I saw that these items were removed, any reasons why?

TL/DR, ESLint was not enabled on ts files because it requires typescript-eslint-parser which is still not mature and has a big Help Wanted! banner in the readme, which could cause maintainability issues for the CRA team. It also targets specific versions of typescript which could prevent users from upgrading. (#4837 (comment), #4837 (comment))

TSLint built-in support was removed because CRA itself does not lint style preferences, but only critical things like undeclared variable names and typescript already has good defaults for this. Also, the user can run tslint on their own with no problem. (#4837 (comment))

stunaz · 2018-10-20T15:51:42Z

Great! Now what? Release, shall we?

alexdor · 2018-10-21T16:39:31Z

Huge thanks to @brunolemos for all his effort and of course huge thanks to the team of create react app : ) Can't wait for this to be released : )

brunolemos · 2018-10-21T16:54:38Z

IT'S MERGED 🎉🎉🎉
Thanks everyone for the motivation and reviews, and thanks @Timer for merging!

EDIT: Just tweeted about it

💙

RIP21 · 2018-10-21T19:05:19Z

Amazing stuff! :) Finally :)

nucab · 2018-10-22T08:03:41Z

Many thanks to @brunolemos for your efforts.. Looking forward for the release :)

johnnyreilly · 2018-10-22T08:07:48Z

I'm so happy this has merged!

A future improvement could be strongly typed JSON support by setting this option in tsconfig.json:

	"resolveJsonModule": true

veeral-patel · 2018-10-22T23:43:01Z

Awesome. Thank you!

Timer · 2018-10-23T00:57:37Z

I've locked this PR since it's high profile and to keep notification spam low. We'll post updates here when we have them.

Please file any concerns as new issues, thanks!

Timer · 2018-10-30T04:32:40Z

TypeScript is now officially supported as of Create React App 2.1. Read the release notes to get started!

facebook-github-bot added the CLA Signed label Jul 29, 2018

brunolemos mentioned this pull request Jul 29, 2018

RFC: Zero-config TypeScript with Babel 7 #4146

Closed

brunolemos force-pushed the next-typescript branch 3 times, most recently from 965fb74 to 2a72721 Compare July 29, 2018 22:47

brunolemos mentioned this pull request Jul 29, 2018

TypeScript support #2815

Closed

brunolemos force-pushed the next-typescript branch 6 times, most recently from 9f3e2c2 to 0db667c Compare August 9, 2018 06:50

brunolemos mentioned this pull request Aug 10, 2018

Migrate react-scripts to v2 wmonk/create-react-app-typescript#284

Open

brunolemos force-pushed the next-typescript branch 10 times, most recently from 06d8ef5 to f33e0ca Compare August 10, 2018 10:10

frankwallis reviewed Aug 13, 2018

View reviewed changes

tobiasandersen mentioned this pull request Oct 19, 2018

Add support for typescript in templates nxtedition/create-caspar-graphics#1

Closed

iansu mentioned this pull request Oct 19, 2018

Typescript directly with babel7 #5489

Closed

TypeScript support

506d173

Timer mentioned this pull request Oct 21, 2018

Ensure TypeScript files outside of build are not checked for build errors #5509

Closed

yordis reviewed Oct 21, 2018

View reviewed changes

Comment thread packages/react-scripts/scripts/utils/createJestConfig.js

This was referenced Oct 21, 2018

Fix peer dependencies wmonk/create-react-app-typescript#387

Closed

Replace TSLint with eslint-config-react-app-ts wmonk/create-react-app-typescript#388

Closed

kdnk mentioned this pull request Oct 22, 2018

[Public] Frontend Night #23 wantedly/frontend-night#23

Closed

eps1lon mentioned this pull request Oct 22, 2018

[docs] AppBar and Textfield demos in TypeScript mui/material-ui#13229

Merged

2 tasks

ianschmitz mentioned this pull request Oct 22, 2018

[WIP] TypeScript final touches #5514

Closed

3 tasks

brunolemos mentioned this pull request Oct 22, 2018

Enable TypeScript json module resolver #5531

Merged

Uh oh!

Conversation

brunolemos commented Jul 29, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Includes

These items were included, but removed per review suggestion

Pending suggestions (help wanted!)

Screenshot

How to try this PR while it's not merged

Uh oh!

ianschmitz commented Jul 30, 2018

Uh oh!

brunolemos commented Jul 30, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

frankwallis Aug 13, 2018

Choose a reason for hiding this comment

Uh oh!

frankwallis Aug 13, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

frankwallis Aug 13, 2018

Choose a reason for hiding this comment

Uh oh!

frankwallis Aug 13, 2018

Choose a reason for hiding this comment

Uh oh!

ianschmitz Aug 13, 2018

Choose a reason for hiding this comment

Uh oh!

frankwallis Aug 13, 2018

Choose a reason for hiding this comment

Uh oh!

Jessidhia commented Oct 16, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

GeeWee commented Oct 16, 2018

Uh oh!

DanielRosenwasser commented Oct 16, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jleck commented Oct 16, 2018

Uh oh!

afarmerdev commented Oct 17, 2018

Uh oh!

DanielRosenwasser commented Oct 19, 2018

Uh oh!

afarmerdev commented Oct 19, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

samuelcastro commented Oct 19, 2018

Uh oh!

samuelcastro commented Oct 19, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brunolemos commented Oct 20, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

stunaz commented Oct 20, 2018

Uh oh!

Uh oh!

alexdor commented Oct 21, 2018

Uh oh!

brunolemos commented Oct 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

RIP21 commented Oct 21, 2018

Uh oh!

nucab commented Oct 22, 2018

Uh oh!

johnnyreilly commented Oct 22, 2018

Uh oh!

veeral-patel commented Oct 22, 2018

Uh oh!

Timer commented Oct 23, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Timer commented Oct 30, 2018

Uh oh!

brunolemos commented Jul 29, 2018 •

edited

Loading

brunolemos commented Jul 30, 2018 •

edited

Loading

frankwallis Aug 13, 2018 •

edited

Loading

Jessidhia commented Oct 16, 2018 •

edited

Loading

DanielRosenwasser commented Oct 16, 2018 •

edited

Loading

afarmerdev commented Oct 19, 2018 •

edited

Loading

samuelcastro commented Oct 19, 2018 •

edited

Loading

brunolemos commented Oct 20, 2018 •

edited

Loading

brunolemos commented Oct 21, 2018 •

edited

Loading

Timer commented Oct 23, 2018 •

edited

Loading