TypeScript support using Babel 7 #4837
Conversation
One way to fix image imports TS error: However this doesn't take into account the recent improvements made in CRA 2.0 such as #3718 |
@iainbeeston thanks! I added an index.d.ts file fixing We currently only have one |
f33e0ca
@@ -0,0 +1,12 @@ | |||
declare module '*.jpg' |
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.
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' |
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.
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>> |
frankwallis
Aug 13, 2018
I'm interested to know why this is needed?
I'm interested to know why this is needed?
@@ -1,5 +1,7 @@ | |||
import 'jest'; |
frankwallis
Aug 13, 2018
An alternative to adding this import is to add types: [ 'jest' ]
to tsconfig.json
An alternative to adding this import is to add types: [ 'jest' ]
to tsconfig.json
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.
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", |
frankwallis
Aug 13, 2018
nit: capitalization
nit: capitalization
@brunolemos I saw that these items were removed:
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? |
TL/DR, ESLint was not enabled on ts files because it requires typescript-eslint-parser which is still not mature and has a big 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)) |
Great! Now what? Release, shall we? |
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 : ) |
IT'S MERGED EDIT: Just tweeted about it |
Amazing stuff! :) Finally :) |
Many thanks to @brunolemos for your efforts.. Looking forward for the release :) |
I'm so happy this has merged! A future improvement could be strongly typed JSON support by setting this option in
|
Awesome. Thank you! |
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! |
TypeScript is now officially supported as of Create React App 2.1. Read the release notes to get started! |
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 thetypescript fork-ts-checker-webpack-plugin
dependencies. It will appear at the same console as the build one. Another option is to install onlytypescript
and runnpx tsc -w
on a new terminal tab instead.Includes
.ts
and.tsx
file extensionsfork-ts-checker-webpack-plugin
(opt in)json
,bmp
,gif
,jpeg
,jpg
,png
andsvg
typescript
option onreact-app
babel preset to enable/disable@babel/preset-typescript
(enabled by default, just likeflow
)These items were included, but removed per review suggestion
TSLint support using(#4837 (comment), #4837 (comment))fork-ts-checker-webpack-plugin
ESLint support for TypeScript files using(#4837 (comment))typescript-eslint-parser
Support(#4837 (comment))tsconfig.prod.json
andtslint.prod.json
Automatically enableflow
ortypescript
presets by detecting.flowconfig
andtsconfig.json
Prevent enabling bothflow
andtypescript
in the same projectPending suggestions (help wanted!)
Fix build test not passing even though it's correct (#5440)Use(it's ok for this first iteration)async: true
on type checking? (would need to fix errors not showing up)Make sure ESLint works great on tsx filesMake 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)tsconfig.json
when typescript is imported for the first time?tsconfig.json
options likeisolatedModules: true
?Remove typescript dependency? (will probably need to change something onfork-ts-checker-webpack-plugin
, because it isn't working without it)Enable type checking on test files using ts-jest? (#4837 (comment))(no)Screenshot
How to try this PR while it's not merged
git clone git@github.com:brunolemos/create-react-app.git
cd create-react-app
git checkout next-typescript
yarn
cd packages/react-scripts/
yarn link
cd ~/your/projects/folder
npx create-react-app app-name
cd app-name
yarn link react-scripts
yarn start