Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeScript support using Babel 7 #4837

Merged
merged 1 commit into from Oct 21, 2018

Conversation

@brunolemos
Copy link
Collaborator

commented Jul 29, 2018

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 (#4837 (comment), #4837 (comment))
  • ESLint support for TypeScript files using typescript-eslint-parser (#4837 (comment))
  • Support tsconfig.prod.json and tslint.prod.json (#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 (#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? (#4837 (comment))
  • Enable type checking on test files using ts-jest? (#4837 (comment)) (no)

Screenshot

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

image

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
  • Finish
    • yarn start
    • Have fun with types 馃帀

@brunolemos brunolemos force-pushed the brunolemos:next-typescript branch 3 times, most recently from 965fb74 to 2a72721 Jul 29, 2018

@brunolemos brunolemos referenced this pull request Jul 29, 2018

Closed

TypeScript support #2815

@ianschmitz

This comment has been minimized.

Copy link
Collaborator

commented Jul 30, 2018

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

This comment has been minimized.

Copy link
Collaborator Author

commented Jul 30, 2018

@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.

@brunolemos brunolemos force-pushed the brunolemos:next-typescript branch 6 times, most recently from 9f3e2c2 to 0db667c Aug 9, 2018

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

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

This comment has been minimized.

Copy link
@frankwallis

frankwallis Aug 13, 2018

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.

declare module '*.png'

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

This comment has been minimized.

Copy link
@frankwallis

frankwallis Aug 13, 2018

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.

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

export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>

This comment has been minimized.

Copy link
@frankwallis

frankwallis Aug 13, 2018

I'm interested to know why this is needed?

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

This comment has been minimized.

Copy link
@frankwallis

frankwallis Aug 13, 2018

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

This comment has been minimized.

Copy link
@ianschmitz

ianschmitz Aug 13, 2018

Collaborator

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

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

This comment has been minimized.

Copy link
@frankwallis

frankwallis Aug 13, 2018

nit: capitalization

@samuelcastro

This comment has been minimized.

Copy link

commented Oct 19, 2018

@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 brunolemos force-pushed the brunolemos:next-typescript branch 2 times, most recently from 16ef21d to 67fa674 Oct 20, 2018

@brunolemos

This comment has been minimized.

Copy link
Collaborator Author

commented Oct 20, 2018

@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))

@brunolemos brunolemos force-pushed the brunolemos:next-typescript branch from 67fa674 to 43aa09b Oct 20, 2018

@brunolemos brunolemos force-pushed the brunolemos:next-typescript branch from 43aa09b to 506d173 Oct 20, 2018

@stunaz

This comment has been minimized.

Copy link

commented Oct 20, 2018

Great! Now what? Release, shall we?

@Timer Timer merged commit 88aef11 into facebook:master Oct 21, 2018

1 of 2 checks passed

continuous-integration/appveyor/pr AppVeyor build failed
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@alexdor

This comment has been minimized.

Copy link

commented Oct 21, 2018

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

This comment has been minimized.

Copy link
Collaborator Author

commented Oct 21, 2018

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

EDIT: Just tweeted about it

馃挋

@RIP21

This comment has been minimized.

Copy link

commented Oct 21, 2018

Amazing stuff! :) Finally :)

@noahjohn9259

This comment has been minimized.

Copy link

commented Oct 22, 2018

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

@johnnyreilly

This comment has been minimized.

Copy link
Contributor

commented Oct 22, 2018

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

@kdnk kdnk referenced this pull request Oct 22, 2018

Closed

[Public] Frontend Night #23 #23

danielmahon added a commit to danielmahon/create-react-app that referenced this pull request Oct 22, 2018

@eps1lon eps1lon referenced this pull request Oct 22, 2018

Merged

[docs] AppBar and Textfield demos in TypeScript #13229

2 of 2 tasks complete

@ianschmitz ianschmitz referenced this pull request Oct 22, 2018

Closed

[WIP] TypeScript final touches #5514

0 of 3 tasks complete
@veeral-patel

This comment has been minimized.

Copy link

commented Oct 22, 2018

Awesome. Thank you!

@facebook facebook locked as resolved and limited conversation to collaborators Oct 23, 2018

@Timer

This comment has been minimized.

Copy link
Collaborator

commented Oct 23, 2018

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!

@brunolemos brunolemos deleted the brunolemos:next-typescript branch Oct 23, 2018

@Timer

This comment has been minimized.

Copy link
Collaborator

commented Oct 30, 2018

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can鈥檛 perform that action at this time.