Migrating a JavaScript project to TypeScript using webpack

While porting a little project from JavaScript to TypeScript I scratched my head on a lot of small problems. I wrote this article so that you don’t scratch yours 😉

Prerequisite

An existing JavaScript project that’s already using webpack.

Make webpack work with TypeScript

In order for webpack to build a TypeScript project, you have several things to do to make it load and resolve .ts files.

First you need a typescript loader that can be installed using:

You could also have installed ts-loader.

Then we have to add a new rule for .ts files in webpack.config.js:

This will tell webpack to use the newly installed loader for any .ts files.

Let’s try to run webpack:

Not there yet :/

By default, webpack only resolves .js files. In order for it to correctly resolve .ts files, you also need to add the following to your webpack.config.js:

Outdated webpack version

The following error can happen:

This one is a bit misleading as I wasn’t using any React or jsx files, but it’s easy to fix. As suggested, updating webpack to version 4.x fixed the problem (I was using webpack 2.3.3).

TypeScript libs

You may have this error:

TypeScript can compile code that will run in a variety of environments: from Node.js, to the browser. By default, TypeScript doesn’t have any DOM-related global names.

In order to do that you have to tell him which lib you want to use using the “lib” configuration entry in your tsconfig.json:

TypeScript will then load the types description file found here which will make it understand every dom-related global names and that’s one less error!

Again, it’s standard ES5 JavaScript that’s not by default included by TypeScript. In order to have TypeScript recognize these ES5 global names you have to tell it to include the “es5″ lib in your tsconfig.json file:

For a list of standard libs that TypeScript can use, check this page.

Complete examples

Here are the configuration files I am using:

webpack.config.js

tsconfig.json


Warpdesign.fr