How to set up Typescript with Babel and Webpack

So easy it’s underwhelming

Between France and Spain, my phone

Few days ago I wanted to try Typescript with React.
So, I started to play around with a simple React boilerplate to see how difficult it would be to switch it from vanilla JavaScript to Typescript.

Using babel 7 it turned out to be simpler than I expected.
I was a little bit disappointed by what it actually requires.
This article will be pretty short.

Typescript

It’s JavaScript with types, there isn’t much to say, other than every library will require it’s @types/library as well, but it’s very well documented and quite intuitive.

Setting up Babel 7 + Typescript

I used my own boilerplate to jump start a React project with a basic Webpack configuration.

You can still use Typescript without React, just continue to follow this article and ignore everything with “react” in it’s name.

If you haven’t switched to babel 7 yet, simply check this guide by the babel team, I didn’t need more than that to switch both this small project as well as Prezly entire config. In code it would look something like this commit.

Now to add Typescript itself:

$ npm i -D typescript @babel/preset-typescript source-map-loader

Now on your .babelrc config add Typescript presets together with env and react:

// .babelrc
{
  "presets": ["@babel/react", "@babel/typescript", ["@babel/env", { "modules": false }]],
...

Add a matching test on your webpack config and source-map-loader so you can debug your output code as if it was Typescript.

rules: [
  {
    test: /\.tsx?$/,
    loader: 'babel-loader',
  },
  {
    test: /\.js$/,
    use: ["source-map-loader"],
    enforce: "pre"
  },
...

Finally, copy paste in your root folder a tsconfig.json file from the official documentation and you’re set, welcome to Typescript!

Wasn’t too hard, was it?

Setting up types

Now you should see a few warnings all around your project from typescript telling you about missing types from your packages. Just install them from the official org.
DevDeps go into DevDeps, deps go into deps.
We’ll install types for react, react-dom, react-router and webpack.

$ npm i @types/react @types/react-dom @types/react-router-dom
$ npm i -D @types/webpack-env

Done.

Setting up TSLint

$ npm i -D tslint tslint-react

Create a file on root folder called tslint.json:

// tslint.json
{
  "extends": ["tslint:recommended", "tslint-react"],
  "rules": {}
}

And this is done too, if you use prettier make sure to install tslint-config-prettier as well and add it on your tslint.json file.

Setting up Jest + Enzyme

Assuming your config already works for babel 7 it should require minimal setup:

// install deps
$ npm i -D ts-jest @types/jest @types/enzyme @types/enzyme-adapter-react-16

// package.json jest setup
"jest": {
  ...
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json"
  ],
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",    
  "transform": {
    "^.+\\.tsx?$": "ts-jest",
    ...
  },
  ...
}

That’s pretty much it, remember to change the files extensions to match the new Regexp and you’re done.

That should be it!
Everything else should be pretty straight forward. Check the official docs, they are really well done and handle pretty much everything you might need.

Source of the complete boilerplate here.