How do you know that `@babel/typescript` is sync with tsconfig.json? about reacttemplate HOT 8 CLOSED

That is correct. You can test this by deleting the tsconfig.json and removing the ForkTsCheckerWebpackPlugin from webpack.common.mjs and the build will still work the same.

from reacttemplate.

So when Babel is used to compile, it basically ignores the tsconfig. Babel is entirely separate. For the most part, Babel will just strip out types when transpiling which is why it's significantly faster than tsc which does a lot more.

So you can look at it as two totally separate parts.

• The IDE hints, and the tsc errors are for the developer to know that they need to write better code or fix an issue.
• Babel then turns the ts into js basically ignoring that and will happily turn "unsafe" (but valid) ts code into valid js.

By separating these, you are now using TypeScript purely as a type checker and nothing more. It's solely to make your code better, provide auto complete, type checking, etc. But then when you actually want your code to run, you basically "just run it" without repeating all of those processes to make sure it's valid.

When TypeScript and/or Babel receive updates, how do you guarantee that your template can still work?

Now this is a separate question. But when any library updates, you need to read the changelog, look at what might need to be changed or updated, and react accordingly. But that's true for any library, not just TypeScript or Babel. So yes of course an update could break it, but then you just need to migrate/fix that like you would when updating any other package which has a breaking change.

from reacttemplate.

So your current config of @babel/typescript is basically not related to any tsconfig.json option, correct? (just confirming, as I thought Babel preset would have to be tuned according to tsconfig.json) Can I say that in general @babel/typescript doesn't need to be tuned according to the tsconfig.json?

And thanks for your detailed reply!

from reacttemplate.

@CreativeTechGuy Could you answer one more question please?

Since ts-loader also provides transpileOnly flag, and there are also other single-file transpiler options. Why you decided to stick to babel-loader?

Not having doubts about your decision, but I almost cannot find people who are an expert and interested in using Babel nowadays. Thanks for your reading!

from reacttemplate.

I personally think that tools should be specialized. So pick the best tool for the job, combine multiple tools for the entire system. Babel is by far the best at transpiling code, everything from converting ts -> js, polyfilling, supporting unreleased JS syntax, etc. It's the first to get support for something new 99% of the time. It also has a really great plugin ecosystem so you can do all sorts of advanced things to transform the code if you ever have a need.

TypeScript is great at typechecking your code and providing a great IDE experience. It doesn't really have much extensibility beyond that and is fairly slow comparatively (since what is doing is super complex).

Hopefully that answers your question.

TLDR: Babel is the best tool for transpiling code, so let it be exclusively in-charge of that.

from reacttemplate.

@CreativeTechGuy What's your opinion on those caveats? Is that a big deal? I read some thread on Reddit and people mentioned it.

https://babeljs.io/docs/babel-plugin-transform-typescript#caveats

from reacttemplate.

To me, none of those caveats matter in any situation I've ever been in. I guess you need to determine if they matter to you.

from reacttemplate.

Thanks for your advice :) End of questions, and happy coding!

from reacttemplate.