Is it possible to use TypeScript with create-react-app
? If so, how would you do it?
-
what would prevent you from doing so ?– WilomGfxApr 18, 2017 at 16:19
-
I think its possible, but I personally wouldn't use JavaScript for anything more thant manipulation my client's browsers DOM.– bjosterApr 18, 2017 at 16:23
-
1@WilomGfx In response to "what would prevent you from doing so": in the past I would add some entries to webpack.config.js telling webpack to compile the typescript as part of the build process. With create-react-app, webpack is hidden. There is no place to configure stuff.– Dave FordApr 19, 2017 at 0:33
-
You have to run the eject script– WilomGfxApr 19, 2017 at 0:34
7 Answers
You can do it like this:
create-react-app my-app --scripts-version=react-scripts-ts
See https://github.com/wmonk/create-react-app-typescript
No ejecting required for this.
-
10This now seems to be officially supported by Microsoft: github.com/Microsoft/TypeScript-React-Starter– bfncsJun 1, 2017 at 19:01
-
@bfncs I would watch out though, doesn't seem like this repo is maintained very well (this also comes back in the open issues) Oct 2, 2018 at 20:56
-
1Check the more recent answer from Martin, as ts is now supported by CRA directly. Oct 30, 2018 at 8:23
This is the way to go:
# update create-react-app first
npm update -g create-react-app
create-react-app my-app --typescript
Create React App v2.1.0 now supports TypeScript, so you no longer need to eject or use the react-scripts-ts
fork;
Or you can add TypeScript to the existing app:
yarn add typescript @types/node @types/react @types/react-dom @types/jest
# or
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
then rename .js
files to .tsx
files to start using TypeScript.
Note that a tsconfig.json will be created for you when you run the app. You will be able to edit tsconfig.json except for some options.
Credits:
[1] Vincent answer
[2] migrate create react app typescript post
Typescript is available out of the box now, in create-react-app version 2.1!
You can use it now, like this (as shown here):
npx create-react-app@next app-name --scripts-version=2.0.6-next.c662dfb0 --typescript
-
1
-
Try
npx create-react-app@next app-name --scripts-version=2.0.6-next.c662dfb0 --typescript
-- That's from a comment from this PR: github.com/facebook/create-react-app/pull/5550– Peter WOct 28, 2018 at 23:47 -
Please note we do not recommend you start using the beta until 2.1 is fully out. There will still be breaking changes. Oct 29, 2018 at 14:35
-
1Update: 2.1 is out now! github.com/facebook/create-react-app/releases. So this should work:
npx create-react-app@2.1 app-name --typescript
– Peter WOct 31, 2018 at 6:53
Here is update about create-react-app
--typescript
flag
Previously in order to generate new project in typescript with create-react-app
we used typescript
flag like below
npx create-react-app my-app --typescript
But this typescript
flag will be removed in next major release of create-react-app
as mentioned in the create-react-app --help
--typescript (this option will be removed in favor of templates in the next major release of create-react-app)
So the new solution will be to use a template as mentioned here
ex:
npx create-react-app my-app --template typescript
I posted a feature request in the github issues for create-react-app and here was the response:
Hi! We're not quite ready to consider TypeScript yet (see #142 for updates). We have yet to complete our Flow integration (which we will suggest as first option for type safety).
Additionally, there's really interesting things going on right now. See babel/babylon#320 and babel/babylon#444. TypeScript may soon be parsed by Babylon (and compiled by Babel). Microsoft has interest in seeing this happen, and are working on a WIP themselves, too.
This consideration is probably still a few months out. Sorry!
Though unendorsed by us, there is a fork of CRA which supports TypeScript. We cannot provide support if it doesn't work for you, but it should!
Not sure how to square that with levito's response.
Here is the link to the github issue:
https://github.com/facebookincubator/create-react-app/issues/1998#issuecomment-295311100
You can use Facebook's Official Typescript Template for Create React App.
Do
npx create-react-app my-app --template typescript
or
yarn create react-app my-app --template typescript
Also, you can create your app using this starter (https://github.com/vtereshyn/react-typescript-eslint-starter)
It doesn't use create-react-app, so fully customizable and changeable. Because using create-react-app it will be hard to add something in some cases...