Typescript has it's own compiler but there are times when you might want to use a different compiler due to personal preference or project requirements. In this article, we will learn how to use a compiler like Babel to compile our Typescript file to Javascript so that our code can run on any browser whilst the function of the Typescript compiler tsc
will be limited to type checking our code.
For us to achieve this, we would make use of Babel's typescript preset, @babel/preset-typescript
.
Installing Packages
Let's start by setting up our project and adding typescript as a dependency.
yarn init -y
yarn add typescript
The -y
flag initialises our project and creates a package.json
file with some default values.
yarn add -D @babel/core @babel/cli @babel/preset-env @babel/preset-typescript
The -D
flag lets us add the packages as dev dependencies. Dev dependencies are packages that are only required during development.
@babel/core
- The core functionalities of Babel resides in this module.
@babel/cli
- We need this module so that we can run Babel from the command line.
@babel/preset-env
- This contains a collection of plugins that we need to transform our ES2015+ code to backwards compatible Javascript that both current and old browsers and other environments can understand.
@babel/preset-typescript
- This strips out the types from our typescript code and lets Babel compile it as regular javascript.
Configuration
Next, we need to configure babel and typescript. We will configure Babel so that it can compile our typescript file to Javascript. We will then configure Typescript in such a way that it only checks the typings in our code.
Configure Babel
Here, we will tell Babel to use the presets we installed in the previous section to transform our code.
Create a babel config file babel.config.json
in the root directory of your project and insert the following content.
{
"presets": ["@babel/env", "@babel/preset-typescript"]
}
Configuring Typescript
Here we will tell Typescript to only check the types in our code and not to compile any files. Babel will handle the compilation for us.
Create a typescript config file tsconfig.json
in the root directory of your project and insert the following content.
{
"compilerOptions": {
"noEmit": true
}
}
Testing what you've built
Type checking by TSC
While writing your code, you will get realtime type-checking by tsc.
Compiling with Babel
You can then compile your code with Babel by running the following code on your command line.
node_modules/.bin/babel src --out-dir lib --extensions ".ts"
The command above tells Babel which we installed to compile every Typescript file in the /src
folder into regular Javascript and output them in the /lib
folder. If your typescript files are located in a different folder, just replace src
with the location of the source files you wish to transform.
Auto-compiling with scripts
We can setup some npm scripts to help us watch and compile our files with Babel every time we make changes to them. By doing so, we do not always have to run Babel on the command line ourselves anytime we make a change.
In your package.json
file, add the following lines of code in the script tag.
"scripts": {
"watch": "babel src --out-dir lib --extensions '.ts' --watch",
"build": "babel src --out-dir lib --extensions '.ts'",
}
Now, we can run yarn run watch
, make changes to our code and see the compiled files in the lib
folder get updated when we save our code.
Here is the github repository of the code.
References
This article was written for Typescript 4.x and Babel 7.x. Here are some links you can check for further reading:
Top comments (4)
Thanks for sharing!
Note that there is missing a double quote after babel/env in the article...
should be...
Thank you. I have made the edit.
If you don't need babel plugins you can try sucrase, it is fastest javascript / typescript compiler
Sucrase is about 20x faster than Babel. Here's one measurement of how Sucrase compares with other tools when compiling the Jest codebase 3 times, about 360k lines of code total:
This is impressive. I will check it out.