48

Is it possible to use TypeScript with create-react-app? If so, how would you do it?

Improve this question
4
  • what would prevent you from doing so ? Commented Apr 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. Commented Apr 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. Commented Apr 19, 2017 at 0:33
  • You have to run the eject script Commented Apr 19, 2017 at 0:34

8 Answers 8

Reset to default
50

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

This now seems to be officially supported by Microsoft: github.com/Microsoft/TypeScript-React-Starter
@bfncs I would watch out though, doesn't seem like this repo is maintained very well (this also comes back in the open issues)
Check the more recent answer from Martin, as ts is now supported by CRA directly.
20

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

Improve this answer

Comments

7

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

Improve this answer

4 Comments

It'll be in v2.1 github.com/facebook/create-react-app/milestone/57
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
Please note we do not recommend you start using the beta until 2.1 is fully out. There will still be breaking changes.
Update: 2.1 is out now! github.com/facebook/create-react-app/releases. So this should work: npx [email protected] app-name --typescript
3

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
Improve this answer

1 Comment

Here's the same answer in video format create react app with typescript
3

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
Improve this answer

Comments

2

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

Improve this answer

Comments

1

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

Improve this answer

Comments

0 
npm install -g create-react-app

npx create-react-app my-app --template typescript
Improve this answer

2 Comments

This answer has been provided several times already.
Plus, you don't need to npm install something you're going to call with npx.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.