DEV Community

Cover image for Use Typescript with Node.js
jean-smaug
jean-smaug

Posted on • Edited on

1 2

Use Typescript with Node.js

In order to use Typescript on the server side, we can choose Deno, the Typescript runtime created by the creator of Node.js. There is a problem, it's not ready yet
The second solution is to transpile our Typescript and execute the result with Node.js.
There are already some tutorials 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
Enter fullscreen mode Exit fullscreen mode

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

yarn add -E koa
Enter fullscreen mode Exit fullscreen mode

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

// 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");
Enter fullscreen mode Exit fullscreen mode

Then we add the scripts to our package.json

{
    "scripts": { 
        "dev": "backpack",
        "build": "backpack build"
    }
}
Enter fullscreen mode Exit fullscreen mode

We now launch a yarn dev and...

console-succes

...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
Enter fullscreen mode Exit fullscreen mode

After that, we initialized a Typescript configuration with

yarn tsc --init
Enter fullscreen mode Exit fullscreen mode

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

// 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");
Enter fullscreen mode Exit fullscreen mode

If we relaunch a yarn dev we got...

console-succes
...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 configuresrc/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
Enter fullscreen mode Exit fullscreen mode

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

// 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;
  }
};
Enter fullscreen mode Exit fullscreen mode

We launch a yarn dev and everything is working !

console-succes

It's over. Simple, no ?

Thanks for reading.

Image of Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs