Using Babel with TypeScript

In this lesson, we will learn how to use Babel in a TypeScript project and cases when it is beneficial.

Technical requirements

You will need the following installed on your computer for this lesson:

• Node.js and npm. You can download these from https:/​/​nodejs.​org/​en/​download/​. If you already have these installed, make sure that Node.js is at least version 8.2, and that npm is at least version 5.

• Code editor such as Visual Studio Code. This can be installed from https:/​/​code.​visualstudio.​com/​.

• The starter project which can be found here. This is the project from the last lesson.

• After the starter project has been downloaded. Open it in a code editor and execute the following command in a Terminal window:

Copy
npm install

This will install the project dependency, which is TypeScript.

Understanding the need for Babel

Babel is a popular tool that is mainly used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript in current and older browsers or environments. It can also convert TypeScript code into JavaScript.

Why would you use Babel to transpile TypeScript when the TypeScript compiler already does this? Well, Babel is capable of converting JSX to JavaScript - the TypeScript compiler can't do this. So, if your project is built using React, you will need Babel. If a project already uses Babel, it is simpler for that to take full responsibility for all the transpilation. That leaves TypeScript to focus on what it is best at - type checking.

Adding Babel to the project

The starter project is a continuation from the last lesson. The app we are building will add numbers from two inputs together.

• In a Terminal window, let’s install Babel with the necessary plugins as a development dependency:

Copy
npm install --save-dev @babel/core @babel/preset-env @babel/preset-typescript @babel/cli

Here’s an explanation of the packages we have just installed:

• @babel/core: As the name suggests, this is the core Babel library.
• @babel/preset-env: This is a collection of plugins that allow us to use the latest JavaScript features but still target browsers that don’t support them.
• @babel/preset-typescript: This is a collection of plugins that enable Babel to transform TypeScript code into JavaScript.
• @babel/cli: This is the Babel command-line tool, which we will use to run Babel.

Babel is configured in a file called .babelrc.

• Let’s create a .babelrc file in the root of our project with the following content:

Copy
{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}

This configuration tells Babel to use the plugins we have installed.

• Let's create an npm script to run Babel in package.json:

Copy
"scripts": {
  ...
  "babel": "babel src/index.ts --out-file dist/bundle.js"
},

We have told Babel to transpile index.ts and place the generated JavaScript in a bundle.js file in the dist folder.

• In a Terminal window, let's run our babel npm script:

Copy
npm run babel

A bundle.js is created in the dist folder.

Summary

If transpilation requirements are beyond the TypeScript compiler's scope, we can use Babel for transpilation and TypeScript for type checking.

In the next lesson, we learn how to use ESLint in a TypeScript project.