Setting up a Node Project with Typescript

A basic guide to setting up a Node JS project with Typescript

I am writing this as a helpful step by step guide through the process, in order to assist others to get their projects setup.

Prerequisites

• A understanding of Node and Javascript with some knowledge of Typescript.
• Node.js installed and a suitable development environment

Step 1 - Starting the Project

Create a folder for the project and navigate to that directory. In the terminal:

mkdir node-starter
cd node-starter

Initialise a npm project,

npm init

or using yarn.

yarn init

You can either answer the questions or add -y after the above commands to automatically answer.

The result should be a package.json file which you can update later if required.

Step 2 - Adding Typescript and configuring

Add Typescript as a dev dependency using npm

npm install --save-dev typescript

or yarn

yarn add -D typescript

Now Typescript is added we need to configure it for use.

Open a code editor such as VScode and create a new file or use a command like nano to make a tsconfig.json file.

We now need to add some config options here for our project.

The Typescript Reference gives a large number of options to pick from here https://www.typescriptlang.org/tsconfig

However they also provide a collection of pre-setup config which you can extend upon.

These can be found on Github under tsconfig/bases

You can select an appropiate one based on your environment or project needs however for this guide I'll just use the Recommended base.

In the terminal using npm

npm install --save-dev @tsconfig/recommended

or with yarn

yarn add -D @tsconfig/recommended

You can now add the following to the tsconfig.json

{
  "extends": "@tsconfig/recommended/tsconfig.json"
}

Step 3 - Expanding Config and Adding Typescript file

So far we've not writing any Typescript and only done configuration.

Lets change that.

Add a new directory src and a file index.ts

Either in the code editor or via terminal.

Now add the following to that file

// src/index.ts

function Greet(name: string) {
  console.log(`Greetings, ${name}`);
}

Greet("Han")

Great we've writing a basic function and used Typescript!

Now how do we get this to compile so we can run?

Running the commands (note npx not npm):

npx tsc

or yarn

yarn tsc

will get the above to compile to Javascript. However this will just make an index.js in you src directory.

Delete that file if you ran the above, as its better to place the compiled code outside of the src folder.

To do this we need to expand on our tsconfig.json by updating it to the following.

{
    "extends": "@tsconfig/recommended/tsconfig.json",
    "compilerOptions": {   
        "outDir": "dist"
    },
}

This is setting the output of the compiler to be the dist folder, you don't need to make this folder as running either of the tsc commands above will create it for you.

To now execute the code we can either just run

node dist/index.js

or update our package.json to match

{
  "name": "node-starter",
  "version": "1.0.0",
  "main": "dist/index.js",
  "license": "MIT",
  "devDependencies": {
    "@tsconfig/recommended": "^1.0.1",
    "typescript": "^4.7.4"
  },
  "scripts": {
    "start": "tsc && node dist/index.js"
  }
}

and then run

npm run start

or yarn

yarn start

Which will result in the terminal displaying the following

Greetings, Han

Conclusion

You've now created a basic Node project which uses Typescript, hopefully this guide has helped you and you can start expanding your understanding of the various tsconfig options and their uses.