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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeScript support #2815

Closed
wants to merge 5 commits into from
Closed

TypeScript support #2815

wants to merge 5 commits into from

Conversation

Timer
Copy link
Contributor

@Timer Timer commented Jul 19, 2017

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.

try {
return require('react-scripts-plugin-typescript').tsc;
} catch (e) {
return require('typescript');

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if this throws, too?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@@ -290,3 +292,5 @@ module.exports = {
hints: false,
},
};

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 });

Copy link
Contributor Author

@Timer Timer Jul 20, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

pushExclusiveLoader,
} = require('react-dev-utils/plugins');

function apply(config, { path, paths }) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@davidwparker
Copy link

@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
Copy link

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
Copy link

icopp commented Sep 18, 2017

@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
Copy link

stunaz commented Oct 14, 2017

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

@bootstraponline
Copy link

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

@qinyang1980
Copy link

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

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

@js2me
Copy link

js2me commented Feb 2, 2018

@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 brunolemos mentioned this pull request Jul 29, 2018
11 tasks
@brunolemos
Copy link
Contributor

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

@devuxer
Copy link

devuxer commented Oct 4, 2018

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

@bugzpodder
Copy link

@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
Copy link
Contributor Author

Timer commented Oct 5, 2018

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

@Timer
Copy link
Contributor Author

Timer commented Oct 18, 2018

Closing in favor of #4837.

@Timer Timer closed this Oct 18, 2018
@Timer Timer added this to the 2.1 milestone Oct 18, 2018
@Timer
Copy link
Contributor Author

Timer commented Oct 30, 2018

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

@lock lock bot locked and limited conversation to collaborators Jan 18, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.