tsc for TypeScriptWhen making a modern JavaScript project, you might ask yourself what the right way to convert files from TypeScript to JavaScript.
\nA lot of the time the answer is “it depends”, or “someone may have decided for you” depending on the project. If you are building your project with an existing framework like tsdx, Angular, NestJS or any framework mentioned in the Getting Started then this decision is handled for you.
\nHowever, a useful heuristic could be:
\ntscbabel for transpiling and tsc for type checkingtsc for typesThis is a common pattern for projects with existing build infrastructure which may have been ported from a JavaScript codebase to TypeScript.
\nThis technique is a hybrid approach, using Babel’s preset-typescript to generate your JS files, and then using TypeScript to do type checking and .d.ts file generation.
By using babel’s support for TypeScript, you get the ability to work with existing build pipelines and are more likely to have a faster JS emit time because Babel does not type check your code.
\nThe downside to using babel is that you don’t get type checking during the transition from TS to JS. This can mean that type errors which you miss in your editor could sneak through into production code.
\nIn addition to that, Babel cannot create .d.ts files for your TypeScript which can make it harder to work with your project if it is a library.
To fix these issues, you would probably want to set up a command to type check your project using TSC. This likely means duplicating some of your babel config into a corresponding tsconfig.json and ensuring these flags are enabled:
\njson\"compilerOptions\": {\n // Ensure that .d.ts files are created by tsc, but not .js files\n \"declaration\": true,\n \"emitDeclarationOnly\": true,\n // Ensure that Babel can safely transpile files in the TypeScript project\n \"isolatedModules\": true\n}
For more information on these flags:
\n","headings":[{"value":"Babel vs tsc for TypeScript","depth":2},{"value":"Babel for transpiling, tsc for types","depth":2},{"value":"Type Checking and d.ts file generation","depth":4}],"frontmatter":{"permalink":"/docs/handbook/babel-with-typescript.html","title":"Using Babel with TypeScript","disable_toc":null,"oneline":"How to create a hybrid Babel + TypeScript project"}},"prev":null,"next":null},"pageContext":{"id":"using-babel-with-typescript","slug":"/docs/handbook/babel-with-typescript.html","repoPath":"/packages/documentation/copy/en/tutorials/Babel with TypeScript.md","lang":"en","modifiedTime":"2020-08-07T17:00:36.347Z"}}}