Setting Up a Node & TypeScript Project - Initial Setup

Published on March 27, 2020

This post is geared towards developers looking to start using TypeScript in their Node projects. Over this post and the subsequent posts we’ll be diving into setting up a Node project with Typescript from scratch. We’ll cover setting up a git reposotory, initializing the project with npm and tsc, setting up common tooling, configuring express, and accessing data from a database with TypeORM.

Prerequisites

Setting Up The Initial Project

First we will setup/initialize our git repository. We will also create a .gitignore file and a README.md.

mkdir node-typescript-starter && cd $_  # Create a project directory and change into it.
git init                                # Initial a new git repository

We can now create our npm package and initialize our typescript configuration.

npm init -y                             # Create a new npm package (-y accepts all defaults)
npx tsc --init                          # Initialize our typescript tsconfig.json

If you look at the generated tsconfig.json file you will see quite a few compiler options that you can enable. You can read more about these different compiler options here. For our project, we are going to clean this up a bit by removing all not needed options. Our tsconfig.json will look something like this…

{
  "compilerOptions": {
    "target": "es6",                         
    "module": "commonjs",                    
    "strict": true,                          
    "esModuleInterop": true,                  
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "forceConsistentCasingInFileNames": true,  
    "paths": {
      "*": [
        "node_modules/*"
      ]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Installing Our Base Dependencies

Now that we have our project initialized, lets install our dev dependencies. We will need to install three in particular: typscript, ‘@types/node, and ts-node. The ts-node` package will allow us to run our typescript code with Node without having to precompile the TypeScript to JavaScript.

npm install --save-dev typescirpt ts-node @types/node

And now we can create our src directory and our entry point typescript file, src/index.ts.

mkdir src                                           # Create src directory
touch src/index.ts                                  # Create entry point index.ts
echo "console.log('Hello World');" >> src/index.ts  # Add simple print to index.ts

If we run tsc at the root of our project, our typescript will be compiled to javascript and outputted to dist/. Then we can run node dist/index.js to run our project. You should see “Hello World” print to the console.

Adding Our NPM Scripts

One of the nice things about npm (yarn as well) is the ability to create scripts. We can create script to automate build processes, copy/move around assets, or even minify files. Lets say you have several commands that you need to run in order to fully build a project. You can tie into npm’s build command and run all commands required to build your project with a single command. You can learn more about npm scripts here

Lets update our package.json with a couple scripts to start and build our project. If you open up package.json, you will see a json property scripts. Update the scripts with the start and build properties below.

{
  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "ts-node src/index.ts",
    "build": "tsc"
  },
  ...
}

Our build script is pretty simple right now, it simply just runs the tsc command to compile the TypeScript to JavaScript but later we can expand on this to do more complicated tasks. Our start script just runs our entry point file index.ts using ts-node. Remember we installed ts-node to allow us to run typescript with node, so our start script will run our index.ts file and without precompiling to JavaScript first.

Building & Running Our Project.

Now if we run npm build, we will get the compiled out to dist/ just like when we ran tsc at the root of the project. If you run npm start, you will see “Hello World” outputted to the console just like when we ran node dist/index.js.

Remember to stage and commit our changes to your repostiory.

git add .
git commit -m 'initial project setup'

The completed github repository can be found here