{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/create-react-app/issues/4837","repository_url":"https://api.github.com/repos/facebook/create-react-app","labels_url":"https://api.github.com/repos/facebook/create-react-app/issues/4837/labels{/name}","comments_url":"https://api.github.com/repos/facebook/create-react-app/issues/4837/comments","events_url":"https://api.github.com/repos/facebook/create-react-app/issues/4837/events","html_url":"https://github.com/facebook/create-react-app/pull/4837","id":345562783,"node_id":"MDExOlB1bGxSZXF1ZXN0MjA0NjYxMzg4","number":4837,"title":"TypeScript support using Babel 7","user":{"login":"brunolemos","id":619186,"node_id":"MDQ6VXNlcjYxOTE4Ng==","avatar_url":"https://avatars1.githubusercontent.com/u/619186?v=4","gravatar_id":"","url":"https://api.github.com/users/brunolemos","html_url":"https://github.com/brunolemos","followers_url":"https://api.github.com/users/brunolemos/followers","following_url":"https://api.github.com/users/brunolemos/following{/other_user}","gists_url":"https://api.github.com/users/brunolemos/gists{/gist_id}","starred_url":"https://api.github.com/users/brunolemos/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brunolemos/subscriptions","organizations_url":"https://api.github.com/users/brunolemos/orgs","repos_url":"https://api.github.com/users/brunolemos/repos","events_url":"https://api.github.com/users/brunolemos/events{/privacy}","received_events_url":"https://api.github.com/users/brunolemos/received_events","type":"User","site_admin":false},"labels":[{"id":409579052,"node_id":"MDU6TGFiZWw0MDk1NzkwNTI=","url":"https://api.github.com/repos/facebook/create-react-app/labels/CLA%20Signed","name":"CLA Signed","color":"009900","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2018-07-29T21:07:14Z","updated_at":"2018-09-09T15:51:56Z","closed_at":null,"author_association":"NONE","pull_request":{"url":"https://api.github.com/repos/facebook/create-react-app/pulls/4837","html_url":"https://github.com/facebook/create-react-app/pull/4837","diff_url":"https://github.com/facebook/create-react-app/pull/4837.diff","patch_url":"https://github.com/facebook/create-react-app/pull/4837.patch"},"body":"Adds TypeScript support.\r\n\r\nCloses #4146 \r\nCloses #2815 \r\n\r\nThe user just needs to rename `.js` to `.tsx` and create a `tsconfig.json` file.\r\nThey can optionally create a `tslint.json` file as well and it will be detected automatically.\r\nType checking happens using `fork-ts-webpack-plugin`.\r\n\r\nSomeone please review, try it out and let me know how it could improve!\r\n\r\n\r\n### Includes\r\n\r\n- [x] Make TypeScript work\r\n  - [x] Bump babel due to flow conflict errors and other typescript fixes they made\r\n  - [x] Support `.ts` and `.tsx` file extensions\r\n  - [x] Add `typescript` option to `react-app` babel preset (which enables `@babel/preset-typescript`)\r\n- [x] Nice to have\r\n  - [x] Support `flow` or `typescript` automatically by detecting `.flowconfig` and `tsconfig.json`\r\n  - [x] Prevent enabling both `flow` and `typescript` in the same project\r\n  - [x] Validate types and show output on console\r\n  - [x] TSLint support\r\n  - [x] Supports `tsconfig.prod.json` and `tslint.prod.json`\r\n  - [x] Support for `svg`, `png` and `jpg` imports\r\n- [x] Update docs\r\n\r\n### Pending improvements\r\n- Maybe have a default `tsconfig.json` and `tslint.json` so the user doesn't need to create one? they would only need to rename the index.js to index.tsx instead. If we do this, we should do for .flowconfig as well\r\n- For some reason it only shows one typescript error at a time\r\n- [optional] Create a `tslint-config-react-app` preset based on `eslint-config-react-app`\r\n\r\n### Screenshots\r\n\r\n```ts\r\ntype TestType = 'a' | 'b'\r\nconst x: TestType = 123\r\n```\r\n![image](https://user-images.githubusercontent.com/619186/43876150-1078ec86-9b6a-11e8-9411-bca79c25d6a8.png)\r\n\r\n### How to try this PR while it's not merged\r\n\r\n- `git clone git@github.com:brunolemos/create-react-app.git`\r\n- `cd create-react-app`\r\n- `yarn`\r\n- `cd packages/react-scripts/`\r\n- `yarn link`\r\n- `cd ~/your/projects/folder`\r\n- `npx create-react-app@next --scripts-version=2.0.0-next.3e165448 app-name`\r\n- `cd app-name`\r\n- `yarn link react-scripts`\r\n- Follow the steps from the readme: [Adding TypeScript](https://github.com/brunolemos/create-react-app/blob/next-typescript/packages/react-scripts/template/README.md#adding-typescript)\r\n- `yarn start`\r\n- Have fun with types 🎉"},"comment":{"url":"https://api.github.com/repos/facebook/create-react-app/issues/comments/419725159","html_url":"https://github.com/facebook/create-react-app/pull/4837#issuecomment-419725159","issue_url":"https://api.github.com/repos/facebook/create-react-app/issues/4837","id":419725159,"node_id":"MDEyOklzc3VlQ29tbWVudDQxOTcyNTE1OQ==","user":{"login":"RIP21","id":3940079,"node_id":"MDQ6VXNlcjM5NDAwNzk=","avatar_url":"https://avatars1.githubusercontent.com/u/3940079?v=4","gravatar_id":"","url":"https://api.github.com/users/RIP21","html_url":"https://github.com/RIP21","followers_url":"https://api.github.com/users/RIP21/followers","following_url":"https://api.github.com/users/RIP21/following{/other_user}","gists_url":"https://api.github.com/users/RIP21/gists{/gist_id}","starred_url":"https://api.github.com/users/RIP21/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/RIP21/subscriptions","organizations_url":"https://api.github.com/users/RIP21/orgs","repos_url":"https://api.github.com/users/RIP21/repos","events_url":"https://api.github.com/users/RIP21/events{/privacy}","received_events_url":"https://api.github.com/users/RIP21/received_events","type":"User","site_admin":false},"created_at":"2018-09-09T15:51:56Z","updated_at":"2018-09-09T15:51:56Z","author_association":"NONE","body":"In instructions, it says that you need to rename all `js` files with `ts` is it really needed or interoperability is possible?"}}
{"actor":{"display_login":"RIP21"}}