Tutorial - Getting started with Typescript

Xavier Geerinck

April 10, 2020 / coding coding-js

Since I write a lot of Typescript projects, it’s quite handy to have an explanation on how to set-up a typescript project.

Start by creating a working directory for your project, such as my-project/ and navigate to it.

Setting Up Typescript Project

To set-up a Typescript project, execute the following and then following the specific steps for your Shell of choice:

# Init NPM
npm init -y

# Install Dependencies
npm install typescript ts-node nodemon rimraf --save-dev
npm install @types/node --save
./node_modules/.bin/tsc --init

Bash

# Init file
mkdir -p src
touch src/index.ts

PowerShell

# Init file
mkdir -p src
echo $null >> src/index.ts

Adapting Files

Adapting package.json

After the project is set-up, we have to adapt our package.json so that we are able to execute npm run start:dev to start developing. Therefor add the following lines to the scripts section:

"build": "rimraf ./dist && tsc",
"start": "npm run build && node dist/index.js",
"start:dev": "npm run build && nodemon --ext \".ts,.js\" --watch \"./src\" --exec \"ts-node ./src/index.ts\""

Adapting tsconfig.json

Last but not least we have to adapt our tsconfig.json file created by the tsc --init script to move the output files to a dist/ folder. So change the following parameters:

"outDir": "./dist"
"rootDir": "./src"

Validation

After executing the steps above, you should now be able to create code, save and have auto-reload working.

./typescript.png

Xavier Geerinck © 2020

Twitter - LinkedIn