Created by: 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!
- 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?
- 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.
- 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.
- 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.
- 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.
- 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!