Use Typescript with Node.js 
Tags: node, typescript, backpack, webpack
Published: 2019-11-11 07:22:12

---
title: Use Typescript with Node.js 
published: true
description: How to use Typescript with Node.js without the legendary combo tsc --watch and nodemon.
tags: nodejs, typescript, backpack, webpack
cover_image: https://thepracticaldev.s3.amazonaws.com/i/rp78jvey4x5p0za7yk9k.jpg
---

In order to use Typescript on the server side, we can choose [Deno](https://deno.land/), the Typescript runtime created by the creator of Node.js. There is a problem, it's not [ready yet](https://deno.land/manual.html#disclaimer)
The second solution is to transpile our Typescript and execute the result with Node.js.
There are already [some tutorials](https://dev.to/wrrnwng/setting-up-typescript-for-node-3ej2) that show it but not many of themtalking about Backpack. It's a module bundler for Node.js based on Webpack

# Backpack

We start with the installation of Backpack

```
yarn add -DE backpack-core
```

After that, we install Koa, which will be our web server example.

```
yarn add -E koa
```

We are now going to create the server in a file situated in `src/index.js`. It's the default entrypoint for Backpack.

```js
// src/index.js
const Koa = require("koa");

const app = new Koa();

app.use(ctx => {
  ctx.body = "Jon Snow meurt saison 5 épisode 10";
});

app.listen(3000);
console.log("listening on port 3000");
```

Then we add the scripts to our package.json

```json
{
    "scripts": { 
        "dev": "backpack",
        "build": "backpack build"
    }
}
```

We now launch a `yarn dev` and...

![console-succes](https://thepracticaldev.s3.amazonaws.com/i/mlfhg8v9ruxjpkxqmrl0.jpg) 

...Backpack is bundling our Javascript sources !


# Adding Typescript

We start by adding Typescript, and all the necessaries types for Node and Koa

```
yarn add -DE typescript @types/node @types/koa
```

After that, we initialized a Typescript configuration with

```
yarn tsc --init
```

We'll now rename our `src/index.js` in `src/index.ts` and update the code

```ts
// src/index.ts
import Koa, { Context } from "koa";

const app: Koa = new Koa();

app.use((ctx: Context) => {
  ctx.body = "Jon Snow meurt saison 5 épisode 10";
});

app.listen(3000);
console.log("listening on port 3000");
```

If we relaunch a `yarn dev` we got...

![console-succes](https://thepracticaldev.s3.amazonaws.com/i/qhwpyptfojaqwi88xwym.png) 
...a beautiful error. 

The error is very explicit, Backpack can't find the `src/index.js` file. So, we'll overide the Backpack configuration and configure`src/index.ts` as the new entrypoint. We'll also give Backpack the possibility to understand Typescript files.

Backpack is based on Webpack, so, we can use all of his loaders.
Let's add the Typescript loader.

```
yarn add -DE ts-loader
```

The last step is to create a config file named `backpack.config.js`, add the new entrypoint and the Typescript loader. 

```js
// backpack.config.js
module.exports = {
  webpack: (config, options, webpack) => {
    // new entrypoint
    config.entry.main = ["./src/index.ts"];

    // extensions resolution
    config.resolve = {
      extensions: [".ts", ".js", ".json"]
    };

    // Typescript loader
    config.module.rules.push({
      test: /\.ts$/,
      loader: "ts-loader"
    });

    return config;
  }
};
```

We launch a `yarn dev` and everything is working !

![console-succes](https://thepracticaldev.s3.amazonaws.com/i/mlfhg8v9ruxjpkxqmrl0.jpg)

It's over. Simple, no ? 

Thanks for reading.