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

[BACKUP] TypeScript support using Babel 7, with monorepo support #1

Closed
wants to merge 9 commits into from

Conversation

brunolemos
Copy link
Owner

@brunolemos brunolemos commented Sep 27, 2018

This is a backup of the original PR (facebook#4837)
This PR have the features that were removed there, like:

  • Out of the box type checking using fork-ts-webpack-plugin
  • Out of the box TSLint support
  • Support for tsconfig.prod.json and tslint.prod.json
  • Version of react-scripts that still have monorepo support and other things the team removed

The new PR has less features, but it's simpler and has a bigger chance of being merged.
If you still need all these things, use this one right here. Follow the steps below and use this branch: v2-typescript-monorepo


Adds TypeScript support.

Closes facebook#4146
Closes facebook#2815

The user just needs to rename .js to .tsx and create a tsconfig.json file.
They can optionally create a tslint.json file as well and it will be detected automatically.
Type checking happens using fork-ts-webpack-plugin.

Someone please review, try it out and let me know how it could improve!

Includes

  • Make TypeScript work
    • Bump babel (required)
    • Support .ts and .tsx file extensions
    • Add typescript option to react-app babel preset (which enables @babel/preset-typescript)
  • Nice to have
    • Support flow or typescript automatically by detecting .flowconfig and tsconfig.json
    • Prevent enabling both flow and typescript in the same project
    • Validate types and show output on console
    • TSLint support
    • Supports tsconfig.prod.json and tslint.prod.json
    • Support for svg, png and jpg imports
  • Update docs

Pending improvements

  • 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
  • For some reason it only shows one typescript error at a time
  • [optional] Create a tslint-config-react-app preset based on eslint-config-react-app
  • Do not assume it will use TSLint, it may use ESLint with TS support
  • Decide if cra should do the type checking or the user should run the tsc -w on its own

Screenshots

type TestType = 'a' | 'b'
const x: TestType = 123

image

How to try this PR while it's not merged

  • git clone [email protected]:brunolemos/create-react-app.git
  • cd create-react-app
  • git checkout next-typescript git checkout v2-typescript-monorepo
  • yarn
  • cd packages/react-scripts/
  • yarn link
  • cd ~/your/projects/folder
  • npx create-react-app@next --scripts-version=2.0.0-next.3e165448 app-name
  • cd app-name
  • yarn link react-scripts
  • Follow the steps from the readme: Adding TypeScript
  • yarn start
  • Have fun with types 🎉

@brunolemos brunolemos changed the title [BACKUP] TypeScript support using Babel 7 [BACKUP] TypeScript support using Babel 7, with monorepo support Sep 27, 2018
@brunolemos brunolemos closed this Oct 28, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant