How to Set Up TypeScript with Node.js

Node.js is a popular JavaScript runtime environment that allows developers to run JavaScript on the server-side. TypeScript is a superset of JavaScript that adds type annotations, interfaces, and other features that help developers write more maintainable and scalable code. In this tutorial, we'll walk through how to set up a TypeScript project with Node.js.

Prerequisites

Before we start, make sure you have Node.js installed on your system. You can download it from the official Node.js website.

Step 1: Initialize a new Node.js project

First, let's create a new directory for our project and initialize it as a new Node.js project:

mkdir my-typescript-project
cd my-typescript-project
npm init -y

This will create a new package.json file in the project directory.

Step 2: Install TypeScript

Next, let's install TypeScript as a development dependency:

npm install --save-dev typescript

This will install the latest version of TypeScript and add it to the devDependencies section of the package.json file.

Step 3: Install @types/node

To get type definitions for Node.js, we need to install the @types/node package as a development dependency:

npm install --save-dev @types/node

This will install the latest version of @types/node and add it to the devDependencies section of the package.json file.

Step 4: Create a tsconfig.json file

To configure TypeScript, we need to create a tsconfig.json file in the project directory. This file tells the TypeScript compiler how to compile our TypeScript code.

Copy and paste the following code into your tsconfig.json file:

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "target": "ES2020",
    "sourceMap": false,
    "outDir": "dist"
  },
  "include": ["src/**/*"]
}

This configuration sets the module system to ESNext and the module resolution to NodeNext. The target is set to ES2020, which means TypeScript will generate code that is compatible with ECMAScript 2020. The sourceMap option is set to false, which means that TypeScript won't generate source maps. Finally, the outDir option specifies the directory where compiled JavaScript files should be output, and the include option specifies the directory where the TypeScript source files are located.

Step 5: Create a src directory

Let's create a src directory for our TypeScript source files:

mkdir src

Step 6: Write some TypeScript code

Now that we have our project set up, let's write some TypeScript code. Create a new file in the src directory called index.ts:

touch src/index.ts

In this file, let's write some simple TypeScript code:

const message: string = "Hello, world!";
console.log(message);

This code declares a constant variable called message of type string and assigns it the value "Hello, world!". Then, it logs the value of message to the console.

Step 7: Compile the TypeScript code

Now that we have some TypeScript code, let's compile it to JavaScript. Run the following command in the terminal:

npx tsc

This will run the compiled index.js file and output "Hello, world!" to the console.

Conclusion

In this tutorial, we learned how to set up a TypeScript project with Node.js.