Part 1. Project initial setup: TypeScript + Node.js

Alex Losikov
3 min readAug 5, 2020

Node & Yarn installation

JavaScript applications are run with node, JavaScript compiler/interpreter. As node has multiple versions, and you might need to use different node version for your different projects, I recommend to use nvm, node version manager, which can be installed in your home folder, and will allow you to install multiple node versions, also in your home folder, and easily switch them when needed. The following script will install nvm to ~/.nvm folder and update your shell profile (~./zshrc, ~/.bashrc, etc):

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash
# follow the command ouput, restart terminal or source ~/.bashrc

As I want to use a stable node version, I install lts version:

$ nvm install --lts
# Other useful commands:
# check installation: node --version
# to change version: nvm use --lts
# to list installed versions: nvm list

Node packages can be installed globally, into the system, or locally, inside node_modules of you project folder. Always install packages required for your application locally (default). The packages can be controlled with node package manager, yarn or npm. I prefer yarn. To install it to ~/.yarn run:

$ curl -o- -L https://yarnpkg.com/install.sh | bash
# restart terminal or source ~/.bashrc

Hello World App with TypeScript

Create a project folder:

$ mkdir api-example
$ cd api-example

Create an initial package.json, the project configuration file:

$ yarn init
yarn init v1.22.4
question name (api-example):
question version (1.0.0):
question description: Backend API Example
question entry point (index.js): src/app.ts
question repository url: git@github.com:losikov/api-example.git
question author: Alex Losikov
question license (MIT):
question private:
success Saved package.json
Done in 18.95s.

Install initial dependencies (-D flag is a development dependency):

$ yarn add @types/node typescript 
$ yarn add -D ts-node

Create tsconfig.json, required for tsc and ts-node, to compile TypeScript to JavaScript:

$ yarn tsc --init --rootDir src --outDir ./bin --esModuleInterop --lib ES2019 --module commonjs --noImplicitAny true

Create your first source file in src folder:

$ mkdir src
$ echo “console.log(‘Hello World\!\!\!’)” > src/app.ts

Build the project:

$ yarn tsc

tsc, TypeScript to JavaScript compiler, is located in ./node_modules/.bin/tsc. yarn resolves the path and run it with node. The command above compiles our TypeScript to JavaScript with an ouput to ./bin folder. Now, you can run the output JavaScript file, ./bin/app.js, with node:

$ node ./bin/app.js
Hello World!!!

For development purposes, ts-node is used, to run code without a compilation. ts-node will compile it on fly:

$ yarn ts-node ./src/app.ts

As with tsc, we run ts-node with yarn to resolve it location.

Let’s add build and run scripts to package.json. Add the following section to package.json file above “dependencies”:

"scripts": {
"build": "tsc",
"start": "node ./bin/app.js",
"dev": "ts-node ./src/app.ts"
},

Now, you can run the scripts easier.

To build TypeScript to JavaScript:

$ yarn build
yarn run v1.22.4
$ tsc
Done in 1.10s.

To run compiled JavaScript:

$ yarn start
yarn run v1.22.4
$ node ./bin/app.js
Hello world!!!
Done in 0.08s.

Or just run TypeScript with a “compilation” on fly:

$ yarn dev
yarn run v1.22.4
$ ts-node ./src/app.ts
Hello world!!!
Done in 1.11s.

Note for people not familiar with Javascript/Typescript. You can consider yarn build as building a release and yarn start as running it, while yarn dev as runing a debug version. A combination of yarn build and yarn start is used for a deployment, while yarn dev for a development.

You can download the project sources from git https://github.com/losikov/api-example. Git commit history and tags are organized based on the parts.

In the next part of the tutorial, we’ll implement Hello Word App as a HTTP API server.

--

--