TypeScript support

[Timer]

This includes PR #2784.
Here's an example of a working plugin, which enables TypeScript support for development, production, and testing.

Click here to see the diff without PR #2784.

[sompylasar]

What if this throws, too?

[Timer]

This would only happen post eject, where throwing would happen if the user had malformed node_modules; by default this will "work". We could add a helpful message, I suppose.

[sompylasar]

Maybe expand the whitelisted plugins into multiple lines starting from the first plugin, to minimize future diffs?

module.exports = applyPlugins(base, [
'typescript',
], { path, paths });

Diff:

 module.exports = applyPlugins(base, [
'typescript',
+ 'sass',
], { path, paths });

Versus:

-module.exports = applyPlugins(base, ['typescript'], { path, paths });+module.exports = applyPlugins(base, [+ 'typescript',+ 'sass',+], { path, paths });

[Timer]

This is controlled by prettier, but I agree that it's a good idea.
We're going to be adding more meta information (and probably move where this is) -- we will need plugin name and plugin version supported: { name: 'typescript', version: '1.x' }.
Once this is turned into an object it'll probably break onto single lines.

[NMinhNguyen]

Just curious: is there any reason this isn't just const path = require('path'), but passed into the plugin instead?

[Timer]

When inlining the plugin during eject the transform is not smart enough to pull required dependencies/packages; so for now required packages must be passed in.

[NMinhNguyen]

Ah makes sense! Is react-dev-utils/plugins a little special then, that you're able to require it just above?

[Timer]

Yeah! Those methods get removed entirely when ejecting -- that package should be the only package that is ever required inside the plugin(s).

[Timer]

See https://github.com/facebookincubator/create-react-app/pull/2815/files#diff-21f5f38397f605ff768f8636476fbae1R224.

[davidwparker]

@Timer - good stuff here.

Question- is there a time we think the plugin system #2784 is going to be added? And if so, how do you think something like this will compare to https://github.com/wmonk/create-react-app-typescript ?

Keep up the good work, thanks!

[zhenwenc]

I am using create-react-app with Typescript and CSS Modules without "ejecting". The solution to me is pretty easy and strait-forward. I suggest please keep the create-react-app project clean and simple as what it is, no need to add unnecessary complexity. It was just my personal opinion, thanks for the great work!

Welcome to have a look and give it a try zc-react-scripts

[icopp]

@davidwparker I think the create-react-app-typescript project has the problem that anything that doesn't ultimately feed Typescript through Babel loses benefits like tree shaking. Just using ts-loader or similar directly is only really practical if ALL your dependencies are also Typescript.

[stunaz]

@Timer any news on this? Or it has to land after plugin system?

[bootstraponline]

Is there a plan to have this merged? TypeScript support would be awesome.

[qinyang1980]

(create react app + typescript + antd) without eject and without using Babel.

https://github.com/qinyang1980/create-react-antd-app.git

[js2me]

@qinyang1980 it's repository supports tree shaking of typescript files in build application? Just I heard so react-create-app doesn't support that feature in building

[brunolemos]

I made an alternative PR adding TypeScript using Babel 7: #4837

[devuxer]

@Timer, Do you have a status update on this? Is it still planned? Is there an ETA?

[bugzpodder]

@devuxer please follow along here:
#4837
and Dan said there should be some support by end of the year: https://news.ycombinator.com/item?id=18118349

[Timer]

We're very interested in bringing TypeScript support. I will either finish this PR or merge #4837 provided everything works properly.

[Timer]

Closing in favor of #4837.

[Timer]

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