Unleash the Power of TypeScript with Node.js

Did you know you can use TypeScript alongside Node.js to build robust, scalable server-side applications with ease?

Content Navigation show

While Node.js provides an efficient runtime for building high-performance network apps, TypeScript supercharges the development experience – improving speed, quality and maintainability.

Together they enable you to ship mission critical systems at a pace teams using Java and C# can only dream of.

In this actionable guide, you’ll unlock their full potential with:

✅ A smooth setup flow for maximizing productivity
✅ Power user tips and patterns for managing complexity
✅ Sample projects to apply learnings faster

You’ll be slinging TypeScript backed web services in no time! Let’s get started pal.

Why TypeScript & Node.js are Taking Over

First, a quick history lesson so you understand why this combo is becoming so enormously popular…

Node.js exploded onto the scene in 2009, revolutionizing server-side development by allowing JavaScript code to run outside the browser for the first time.

Its event-driven, non-blocking I/O meant one JavaScript process could handle tens of thousands of concurrent connections efficiently.

Unlike traditional thread-based servers, no time is wasted blocking – requests are handled asynchronously as underlying I/O operations complete.

This made Node.js ideal for building high traffic web services like chat, real-time apps – where latency and throughput matter.

Companies like Netflix, Uber, Paypal and many more now use Node.js to power large parts of their backend infrastructure.

On the other end of the spectrum – TypeScript was announced in 2012 by Microsoft as an open-source language that adds optional static type checking for application scale JavaScript development.

Over the last 5 years, TypeScript usage has grown faster than any language in history:

{{ImageOfTSPopularity}}

Today, over 50% of JavaScript developers now use TypeScript during development. Well-known companies like Google, Amazon, Facebook, Twitter and Spotify rely on it for their massive frontend codebases.

And now these two technologies have converged – with Node.js adopting TypeScript as the preferred language for writing robust server-side applications too.

Let‘s look at why…

The Benefits of Using TypeScript with Node.js

TypeScript helps address common issues faced during large-scale JavaScript development:

No Compile Time Checks – JavaScript only checks for errors when code runs, slowing down development with tricky runtime bugs.

Weak Tooling – Plain JS lacks robust editor tooling around refactoring, auto complete, static analysis etc.

Loose Structure – With no interface or custom types, adding structure across files, modules and developers is challenging.

TypeScript fixes these problems by providing:

✅ Optional Typing – Code can be gradually typed allowing static analysis
✅ Editor Tooling – First-class support across IDEs like VSC, WebStorm etc
✅ Modern JS Features – Next-gen JavaScript support like classes, modules
✅ Non-JavaScript Support – Type definitions for APIs, libraries and more

This leads to more robust, maintainable code easier.

Paired with Node.js‘s lightweight architecture and huge ecosystem – the two supercharge development of fast, resilient backend systems.

Adoption is skyrocketting as a result:

{{ImageOfNodeTSPopularity}}

Over 80% of Node.js developers now use TypeScript in their stacks as well!

Now that you see the immense benefits this combo brings, let me show you how to put it into practice…

Configuring a Node.js + TypeScript Environment

Let‘s install Node.js and TypeScript locally and set up an efficient dev environment step-by-step:

Prerequisite: Install Node.js

Make sure you have the latest LTS version of Node.js installed.

You can check your version by running:

node -v
# v16.14.0

If it‘s outdated or missing, grab an installer for your OS from nodejs.org and run it.

This will install both node and the npm package manager we‘ll use later.

{{Image:NodeVersionTerminal}}

Next up, the TypeScript compiler…

1. Initialize Node.js Project

Create an empty folder for your app and initialize a Node.js project:

mkdir my-app
cd my-app
npm init -y

The npm init command will generate a basic package.json manifest file with project metadata:

{
  "name": "my-app",
  "version": "1.0.0", 
  "main": "index.js",
  "license": "MIT"
}

We‘ll use this to manage dependencies next…

2. Install TypeScript Compiler

Now install the TypeScript compiler locally in your project as a dev dependency:

npm install --save-dev typescript

This lets you work with a specific TypeScript version across machines.

You could install it globally too but local is preferable for repeatability.

You‘ll also see it under devDependencies in package.json:

{
  // ..
  "devDependencies": {
    "typescript": "^4.9.4"
  }
}

Next, configure compilation options…

3. Create TypeScript Configuration File

The tsconfig.json file defines how TypeScript should convert .ts source files into .js JavaScript code as well as enabling extra checks and features.

Initialize it using:

npx tsc --init --rootDir src --outDir build \
--esModuleInterop --resolveJsonModule --lib es6 \ 
--module commonjs --allowJs true --noImplicitAny true

This creates a preconfigured tsconfig.json file:

{
  "compilerOptions": { 
    "outDir": "./build",
    "rootDir": "./src"
  }
}

That sets the:

  • rootDir: To look for source .ts files in ./src
  • outDir: To emit .js files compiled from source into ./build

See the 60+ available compiler options to customize further.

And that‘s it! Our TypeScript + Node.js environment is prepped.

Using TypeScript with Node.js

Let‘s build a simple TS sample app from scratch to cement these concepts…

1. Add Index Source File

Under a new src folder let‘s create an index.ts file with some code:

// src/index.ts

function logHello(name: string) {
  console.log(`Hello ${name}!`);
}

logHello("Nicholas");

Notice our logHello function accepts a string parameter denoting the input type.

2. Compile Source Code

We can manually compile this into JS by running:

npx tsc

This will emit an index.js file in build corresponding to our source:

// build/index.js 

function logHello(name) {
  console.log("Hello " + name + "!"); 
}
logHello("Nicholas");

Let‘s run it with Node:

node build/index.js

// Hello Nicholas!

It works! But having to manually recompile on every change is annoying.

Let‘s set up incremental compilation instead…

3. Configure Incremental Compilation

We can use ts-node to execute TS directly without compiling to JS. Even better, use it with nodemon to restart when files change:

npm install --save-dev ts-node nodemon

Then add a script to package.json like:

"scripts": {
  "dev": "nodemon --watch ‘src/**/*.ts‘ --exec ‘ts-node‘ src/index.ts"  
},

Now instead of tsc, run: 

npm run dev

This will:

  1. Watch for any edits in src/**/*.ts files
  2. Automatically re-run ts-node to recompile + execute app on each change!
nodemon await restart  
Compiled successfully!

Hello Nicholas!

This 10x developer experience is why TypeScript + Node.js rocks for backend web dev!

Now let‘s look at some best practices…

Node.js + TypeScript Best Practices

When working with medium to large scale TypeScript + Node.js codebases, here are some key things to consider:

Use the Strict Compiler Flag

Enabling the strict flag in tsconfig.json is hugely beneficial: 

{
    "compilerOptions": {
       "strict": true
    }
}

This changes compilation to catch common sources of bugs like implicit typing, null errors, unused variables etc.

Structure Codebases into Domain Modules

Node.js thrives when code is modularized into separate domain-based files and folders. Some good patterns:

  • Break components intoSeparate files/folders by capability
  • Use ES6 import/export syntax over CommonJS
  • Keep modules narrowly focused doing one thing well

TypeScript strongly encourages this via explicit export syntax and editor tooling – keep domains decoupled!

Validate Data Flowing In

Whether data comes from an API response, DB query or user submitted form – validating inputs prevents nasty bugs.

With TypeScript this can largely happen automatically when correctly typed. But for unknown data, use libraries like class-validator + class-transformer.

Depend on Abstractions via Inversion of Control

Tight couplings makes code difficult extend, mock, and test. Instead, depend on abstractions via dependency injection:

interface Store {
  // db methods
}

class UserService {
  constructor(private store: Store) {} 

  saveUser(user: User) {
    return this.store.insertUser(user);
  }
}

const db = new DatabaseStore(); 
const userService = new UserService(db);

InversifyJS is a superb TypeScript framework expanding these DI capabilities.

Handle Errors Gracefully

Robust error handling prevents crashes and returns meaningful responses:

try {

  const user = await userService.getById(userId);  
  return { user };

} catch (error) {

  logger.error(error);

  if (error instanceof UserNotFoundError) {
    return { error: "User not found" };
  }

  return { error: "Internal error" }; 
}

Wrapped blocks + instanceof checks helps handle issues cleanly.

I‘ve barely scratched the surface of rock solid patterns here! For in-depth production grade practices, check the Node.js Best Practices resource.

Now let‘s look at some sample projects…

Building Sample Apps

Let‘s apply some learnings by using Node + TS to build common backend apps:

REST API Server

REST APIs are the backbone for most modern web and mobile apps.

Thankfully in Node + TS they‘re smooth to scaffold:

npm install express @types/express

Then:

import express from "express";

const app = express();

app.get("/hello", (req, res) => {
  res.send("Hello World!");
});

app.listen(3000, () => {
  console.log("REST API listening on port 3000!");  
});

Add middleware, controllers, validation etc to make production grade. Check my Node.js REST API guide for next steps!

GraphQL API Server

For flexible data fetching, GraphQL APIs are fantastic. Thankfully just as smooth:

npm install graphql express-graphql
import { buildSchema } from "graphql";
import express from "express";
import { graphqlHTTP } from "express-graphql";

// Schema
const schema = buildSchema(`
  type Query { hello: String }
`);

// Root Resolver
const rootValue = {
  hello: () => {
    return "Hello world!";
  },
};

const app = express();
app.use(‘/graphql‘, graphqlHTTP({
  schema,
  rootValue
}));

app.listen(4000, () => {
  console.log("GraphQL server running...");
});

For full blown GraphQL servers, Code With Hugo – Node.js + TS GraphQL Tutorial shows exactly how to build from scratch.

And tons more backend awesomeness awaits like CLI tools, microservices, ORM usage, real-time apps and way beyond!

Closing Thoughts

And that wraps up our TypeScript + Node.js journey!

Here‘s a quick recap of all we covered:

✅ Why TS + Node.js works so well together – typing, tooling and scale
✅ How to install & configure a quick development environment
✅ Compiling, running and incremental dev workflows
✅ Best practices like structure, validation and testing
✅ Building sample backend apps like REST and GraphQL APIs!

There are a ton more capabilities we didn‘t get to like integrating frontends with Next.js and React, building complex systems via NestJS framework, ORM usage with TypeORM, Dockerization, deployment options etc.

As you can see, modern Node.js apps thrive when TypeScript enters the mix – improving team velocity, quality and long term maintainability.

The future looks even brighter with TypeScript support coming directly to serverless platforms like Deno and Cloudflare Workers!

I hope you enjoyed this guide. Let me know if any questions come up on your TypeScript + Node.js journey!

Tags: