-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
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
RFC: Zero-config TypeScript with Babel 7 #4146
Comments
Thanks for thinking about this! I think it would be fantastic if CRA supported TypeScript. Some initial feedback as someone mucking around with trying to update react-scripts-ts to CRA 2.0.0 (https://github.com/jergason/create-react-app-typescript/tree/jergason/update-to-2.0) ESLint Loader Stuff?
I might be misunderstanding this. Are you asking if we can lint TypeScript files with eslint-loader? What eslint parser would this use? I've been using eslint with https://github.com/eslint/typescript-eslint-parser and it has a few major issues. It parses TypeScript successfully, but it falsely flags interfaces and fields in interfaces as undefined variables. Or are you just saying we'd lint the code after compiling it? When To Type CheckYou're suggesting running the compiler as a separate package.json script, which means the build wouldn't type check, right? This means anyone who wants to make sure their builds type check correctly needs to tweak their package.json more, which seems to go against the "zero config" philosophy. Flow support requires adding a Zero-config (or less config)
|
Thanks for the reply @jergason. Been a while since React Rally!
I'm not up on my eslint stuff cuz I work in TS all day. I'd rather use
Yes. My suggestion is that typechecking would happen in a separate process (and terminal window). I was just going for parity with Flow documentation and method of installation here. AFAIK flow does indeed need to be run in a separate process, but editor plugins pick up flow immediately and the same is true for typescript. So to summarize:
Note that neither options impact how editor plugins interact with TypeScript. For example, VSCode language server will pick up and display TS and TSLint errors in the background on open files (without
I've only ever used this is to fix a TS bug regarding nested |
That's quite a few steps to call this "zero config". People should probably still use Or would it be possible to put these steps in a script like |
@evertbouw I disagree. Furthermore as described above, this setup is almost identical to the effort / config required to setup Flow + plus changing filename. |
I really want this, too. Right now this project seems to default to supporting Facebook libraries like Obviously, there is already There is already this ( |
This is such an amazing idea and really well thought-out. Thanks for the work @jaredpalmer and @jergason! Would love to see this. How can we help? |
I'd be happy to help develop and test this if it gets past the proposal stage. I would suggest adopting a "light touch" approach - just do the minimum to enable TS development, and let users configure TSLint if they want to, like the approach taken with Sass. As for exposing tsconfig.json, I think you can probably hide it. Just enable all the various features like decorators. A good argument for hiding it is that usage with Babel requires |
While I would love to see CRA support TypeScript out of the box, I personally don't agree with using a version of the typescript compiler that isn't compatible with the actual TypeScript compiler. I think that will cause a lot of confusion and brittleness over time. |
We have TSLint support coming soon over at strothj/react-app-rewire-typescript-babel-preset#14. I think this will be a great solution for those wanting TS support in CRA 2.0. Would be great to hear feedback on what the community would like to see regarding TSLint. It's worth taking a look at the logic needed to wire in TS support.. there really wasn't much needed! My preference would be to have TS supported directly by CRA, but i understand the desire to keep things as simple as possible. |
I've been very excitedly following this issue since the day it was opened, and want to thank @jaredpalmer for taking the first step in that direction by crafting this proposal. However, I haven't seen much attention from the maintainers and that makes me sad :(. It's understandable though, I know there are a lot of other priorities, but I think having TS support out of the box would be a HUGE benefit. Is there anything we can do to push this forward a little? Maybe make a PR with a proof of concept? Since I'm so heavily interested in this I'm willing to contribute in any way possible. /cc @gaearon
I somewhat agree with @lookfirst 's statement here. I don't know how Babel 7 compiles TS and haven't looked into it, but I'm assuming that it doesn't use |
@reyronald What unsupported language features are you missing? What concerns do you have about using something like create-react-app-typescript? It'd be hard to maintain CRA's painless dev experience if every TypeScript feature needs to work perfectly with everything else CRA offers. It'd likely increase the number of issues and integrations CRA has to worry about (importing images, for example). Maybe we need to see something like CRA from Microsoft, but in the meantime they're highlighting this approach as well. |
Babel doesn't really compile the TS. It strips the types from the source leaving plain JS, and continues running the result through babel (like |
@ianschmitz To be clear, my only comment applies to the idea that whatever |
Within my current workplace we're currently using a forked version of React Scripts which achieves the zero-config TypeScript setup described here. We've not had any serious problems with it so far. The only problem we've had was that the output of I think perhaps you wouldn't want to use this plugin in In my fork TypeScript support is always switched on, however it could be changed so that the existence of a |
@sebinsua could you please share a link to the modified fork? |
@rajington Just the fact that it's a separate project not officially maintained by Facebook and that needs a separate effort to keep in sync with Are you against of including official TS support in CRA ?
@ianschmitz Thanks! Like I said, I didn't know how it worked. If that's how it is, I'm not very concerned by what I mentioned before. And I definitely prefer to stay in the Babel ecosystem because of what you just mentioned. In general, I would like to know how the rest of the community feels about having TS support in CRA? I originally thought it was a no-brainer "yes", but seeing some of your concerns and comments it feels like not everybody thinks the same way, but it is not crystal clear to me if you are leaning on "yes" or "no". Especially because there's no PR open to move this forward! |
I made the PR #4837 with TypeScript support using babel 7. |
I have created a version of react-scripts to use TypeScript with zero configuration. Please try to use https://www.npmjs.com/package/@hieunv/react-scripts |
Can I use typescript without ejecting? It's not clear to me how CRA2 handles |
TypeScript is now officially supported as of Create React App 2.1. Read the release notes to get started! |
For those coming from create-react-app-typescript, I've written a short guide on migrating to Create React App. |
@jaredpalmer I tried to monkeypatch the |
Zero-config TypeScript with Babel 7
As mentioned in several other issues, with the release of Babel 7 and CRA 2, TypeScript support is now possible in a way that does not dramatically change the core of CRA internals. Before proceeding with a PR, would love to gather feedback on a solution / implementation I came up with over the weekend:
Current Behavior
TypeScript users cannot use CRA directly. Popular alternatives include
react-scripts-ts
(a fork of CRA that uses the TypeScript compiler) and Microsoft's React TypeScript boilerplate.Desired Behavior
CRA works with TypeScript via Babel 7 with zero-config. To enable TypeScript, users can just rename
src/index.js
tosrc/index.tsx
.Suggested Solution
paths.appIndexJs
(i.e.src/index.js
->src/index
) so it works regardless of.js
or.ts
or.tsx
..ts
and.tsx
to the extensions in webpack config (resolve, babel loader, file-loader) and Jest configuseTypescript
flag (so that this choice is explicit) and related@babel/preset-typescript
package tobabel-preset-react-app
paths.appIndexJs
to determine whether to set theuseTypeScript
flag in webpack babel-loader options and jest babel transformationAreas of Interest/Discussion/Questions
tsconfig.json
andtslint.json
be zero config? (probably not)fork-ts-webpack-plugin
? (my vote is against this)tslint-loader
to Webpack config if in "TS mode"eslint-loader
with Babel 7 TS? (I'm not sure)tslint-config-react-app
package that is congruent witheslint-config-react-app
Suggested Documentation
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Check out this introduction to using static types in JavaScript if you are new to this concept.
Recent versions of TypeScript work with Create React App projects out of the box thanks to Babel 7. Babel 7 TypeScript does not allow some features of TypeScript such as constant enum and namespaces. You can read more about Babel TypeScript here.
To add TypeScript to a Create React App project, follow these steps:
npm install --save typescript @types/react @types/react-dom
(oryarn add typescript @types/react @types/react-dom
)."type-check": "tsc"
to the scripts section of yourpackage.json
."resolutions"
section to yourpackage.json
to avoid conflicting types of React and ReactDOM in your dependencies:tsconfig.json
in the root of your project:src/index.js
tosrc/index.tsx
Now you can run
npm run type-check
(oryarn type-check
) to check the files for type errors. You can optionally use an IDE like Nuclide or VSCode for a better integrated experience.To learn more about TypeScript, check out its documentation.
The text was updated successfully, but these errors were encountered: