Discussion: TypeScript support

[mattiamanzati]

Feel free to try and give feedback about this PR by using:
create-react-app my-awesome-typescript-app-folder --scripts-version=git://github.com/mattiamanzati/create-react-app.git#typescript-support

This PR should'nt be merged yet, see the discussion below!

Good news everyone!
First of all, thanks to everyone working on this great package! It's allowing newcomers to enter the world of react with just a few command line commands!
Being a TypeScript fan, and after seeing some request about TypeScript support, i tryied to give it a shot!

1. Should we merge this or create a separate "scripts" packages?
   Not everyone uses TypeScript (you should :P), so this PR will just add other stuff to NPM install to users, and if it's not needed, it will just increase the NPM install time of the create-react-app. On the other side this could became a separate NPM package like "typescript-react-scripts" and be installed using --scripts-versions, but this would require to fork (or spoon) all the current configs for webpack, babel, etc... What do you think would be the best solution?
2. Awesome-typescript-loader instead of ts-loader
   I have used this because I like the idea of TypeScript sources made es3 compliant by babel. At the moment typescript does'nt support that natively, so I decided to go with this route and let all pass through babel.
3. babel.dev.js contains non-babel configs
   babel.dev.js uses "cacheDirectory" config, which is a babel-loader and not a babelrc config option. That's why inside typescript.dev.js I have to monkey-patch that config and remove the cacheDirectory option. Maybe we should consider moving that option to a "babel-loader.dev.js" file, and then include the babel config.
4. Find a better TypeScript sample
   I had no idea about that, so I ended up writing a React component that simply tells that you can also write TypeScript. We should find a simple example that uses interfaces, in order to explain the advantages of TypeScript on bigger codebases.
5. tslint confing and eslint confing are different right now
   We should dive into create a unified config between the two system. Writing a hybrid js & ts project would end up in tslint blaming you because it's settings are different. This usually happens when you have a large codebase and slowly migrate to TypeScript.
6. React typings & tsconfig.json
   To avoid adding another dependency, I decided to simply include the react and react-dom typings along with their typings.json file. However this means that we need to keep it up to date, so should we consider adding another dependency and run typings install react react-dom --save?

7. How to handle tests?
Right now tests will fail since it will attempt to test the tsx file. Should'nt we run the test on a compiled file version? Unfortunately I don't know much how we could setup that.

That's all! Thanks for your time and suggestions!

[ghost]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at cla@fb.com. Thanks!

[ghost]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[0xjjpa]

Hey @mattiamanzati, thanks for this PR! Quick question, did you ever encounter issues with awesome typescript loader? I get the following error on npm start:

Babel compiler cannot be found, please add it to your package.json file:
    npm install --save-dev babel-core

from a fresh install, but of course installing locally (or globally) doesn't fix this. Seems related to s-panferov/awesome-typescript-loader#54.

[mattiamanzati]

Uhm, yeah I think it appeared one time only! Try to run npm install typescript --sav-dev in your Project folder and let me Know! Are you running node 6 and npm3?

----- Messaggio originale -----
Da: "Jose Aguinaga" notifications@github.com
Inviato: ‎11/‎09/‎2016 22:42
A: "facebookincubator/create-react-app" create-react-app@noreply.github.com
Cc: "mattiamanzati" manzati.mattia@gmail.com; "Mention" mention@noreply.github.com
Oggetto: Re: [facebookincubator/create-react-app] Discussion: TypeScriptsupport (#509)

Hey @mattiamanzati, thanks for this PR! Quick question, did you ever encounter issues with awesome typescript loader? I get the following error on npm start:
Babel compiler cannot be found, please add it to your package.json file:
npm install --save-dev babel-core
from a fresh install, but of course installing locally (or globally) doesn't fix this. Seems related to s-panferov/awesome-typescript-loader#54.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[0xjjpa]

@mattiamanzati Sadly didn't fix the issue, just tried with a fresh install :( also tried with different flavors of node without much success. Here's my latest setup in my computer (OSX)

 ~/my-awesome-typescript-app-folder  node --version
v6.6.0
 ~/my-awesome-typescript-app-folder  npm --version
3.10.3

[majodev]

Would be really eager to test this, but can't get past the install procedure:

create-react-app my-awesome-typescript-app-folder --scripts-version=git://github.com/mattiamanzati/create-react-app.git#typescript-support

[...]

module.js:457
    throw err;
    ^

Error: Cannot find module '/Users/majo/Desktop/my-awesome-typescript-app-folder/node_modules/git:/github.com/mattiamanzati/create-react-app.git#typescript-support/package.json'
    at Function.Module._resolveFilename (module.js:455:15)
    at Function.Module._load (module.js:403:25)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at checkNodeVersion (/Users/majo/.nvm/versions/node/v6.6.0/lib/node_modules/create-react-app/index.js:169:21)
    at ChildProcess.<anonymous> (/Users/majo/.nvm/versions/node/v6.6.0/lib/node_modules/create-react-app/index.js:126:5)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:877:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)

node --version
v6.6.0

npm --version
3.10.3

create-react-app --version
create-react-app version: 0.4.2

[avanderhoorn]

Any more progress on the possibility of TypeScript support getting in?

[vincemtnz]

This would be much cleaner if it didn't include typings/*. What about @types and installing them as devDependencies? We already have react and react-dom in package.json, so their relevant typings could go in there as well.

[gaearon]

Thanks for the PR!
This adds quite a lot of stuff so I don’t think we’ll include it in the default setup.

Nevertheless I encourage you to fork react-scripts and publish a version that works with TypeScript.

This article explains how you can fork it.
We also intend to document it: #779.

Thanks!

[thdxr]

@majodev Any luck with that error?

[Timer]

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