search

strothj / react-app-rewire-typescript-babel-preset

Add TypeScript support to Create React App using @babel/preset-typescript
https://react-app-rewire-typescript-babel-preset.netlify.com
MIT License
52 stars 6 forks source link

Question: How do I determine what version of TypeScript is being used? #7

Closed lnhrdt closed 6 years ago

lnhrdt commented 6 years ago

How do I determine what version of TypeScript is being used? I understand that this rewire is introducing @babel/preset-typescript which is in turn introducing @babel/plugin-transform-typescript. I'd like to also understand what version of TypeScript is being used by these tools so I can understand what TypeScript language features I can use.

strothj commented 6 years ago

They actually don't use TypeScript at all. What the Babel team did is add tokens for the syntax TypeScript uses. The plugin simply strips them out. The source code for the plugin is here: https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-typescript/src/index.js You can see that it is relatively short.

The things that do not work are listed here: https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-typescript

Anything not relying on syntax changes you get for free like the 2.8 ReturnType<T>. Syntax changes like the definite assignment assertion added in 2.7 require updates to the Babel plugin. (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html - Strict Class Initialization)

You can search the Babel repository for the term typescript to see the issues people are encountering.

From a day to day experience working with projects using this, I think I ran into needing the definite assignment assertion once or twice awhile back. I'm not sure if it is available yet. In any case, you always have the // @ts-ignore to jump over those rare situations.

Not having const enum might be a deal breaker for you, depends on if that's a feature you rely on.

Also worth noting: your build won't fail on type errors. This is because Babel does nothing with the actual typing. To overcome this, you can rely on hints from your development environment or add a commit hook to run tsc with the --no-emit option.

lnhrdt commented 6 years ago

Thank you @strothj for taking the time to explain how the transform works and the syntax gotchas! I'm trying out a library called typesafe-actions and running into an issue there. Your info helped me understand what might be going on. I'll close this issue now, I appreciate the help!

strothj commented 6 years ago

No problem. I'll have a look at it and see if I can figure out what's up. I know Redux has new type definitions with their new release. I haven't had a chance to really get into it yet

strothj commented 6 years ago

I switched out the react-scripts-ts with the rewire here: https://github.com/strothj/typesafe-actions-todo-app

Seems to work for me. Can you see if you have an issue with it?

lnhrdt commented 6 years ago

@strothj thank you! I switched out react-scripts-ts for the rewire in the sample app and it worked for me as well. This helped me sort out the issue I was having. My IDE was configured to use a TypeScript binary with version 2.7.2 which is too old to work with typesafe-actions. Once I sorted out my IDE settings everything came together.

In summary: my issue was my IDE settings and typesafe-actions works great with react-app-rewire-typescript-babel-preset & @babel/plugin-transform-typescript.

I really appreciate you taking the time to take a look at this with me @strothj!

strothj commented 6 years ago

No problem! Let me know if you run into any other problems.