Setting up Babel and Typescript

Inya Chukwuemeka — Sun, 29 Aug 2021 11:00:23 +0000

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:

DEV Community: Inya Chukwuemeka