Setting up Babel and Typescript
Tags: babel, javascript, typescript, frontend
Published: 2021-08-29 11:00:23

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](https://github.com/benfixit/babel-typescript) 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:
1. [Babel documentation](https://babeljs.io/docs/en/)
2. [Typescript documentation](https://www.typescriptlang.org/docs/)