Adding TypeScript to our Server

#

📝 This lesson's quiz can be found - here.
🗒️ Solutions for This lesson's quiz can be found - here.

To configure our Node server into a TypeScript project, we'll need to install and use certain TypeScript packages. We'll install the latest versions of the typescript and ts-node libraries as development dependencies.

• typescript is the core Typescript library that will help us compile our TypeScript code to valid JavaScript.
• ts-node is a utility library that helps us run TypeScript programs in Node.

server $: npm install -D typescript ts-node

tsconfig.json

#

The first thing we'll do to introduce TypeScript into our Node server project is create a TypeScript configuration file (tsconfig.json). The tsconfig.json file is a JSON file that should be created at the root of a TypeScript project and indicates the parent directory is a TypeScript project. tsconfig.json is where we can customize our TypeScript configuration and guide our TypeScript compiler with options required to compile the project.

server /
  // ...
  tsconfig.json

To customize and edit the options of the TypeScript compiler, we'll specify a compilerOptions key in our tsconfig.json file.

{
  "compilerOptions": {}
}

There are a large number of options we can dictate and control in our compiler of which all can be seen in the TypeScript handbook. We're not going to go through all the different possible options but instead dictate the ones we'll use for our app.

target

#

We'll declare the target option which specifies the target JavaScript version the compiler will output. Here we'll declare a target output of es6 since Node supports a vast majority of ES6 features.

"target": "es6",

module

#

We'll declare the module option which refers to the module manager to be used in the compiled JavaScript output. Since CommonJS is the standard in Node, we'll state commonjs as the module option.

"module": "commonjs",

rootDir

#

To specify the location of files for where we want to declare TypeScript code, we'll use the rootDir option and give a value of src/ to say we want our compiler to compile the Typescript code in the src/ folder.

"rootDir": "./src",

outDir

#

We can use the outDir option to specify where we'd want to output the compiled code when we attempt to compile our entire TypeScript project into JavaScript. We'll dictate that we'll want this output code to be in a folder called build/.

"outDir": "./build",

esModuleInterop

#

To help compile our CommonJS modules in compliance with ES6 modules, we'll need to introduce the esModuleInterop option and give it a value of true.

"esModuleInterop": true,

strict

#

Finally, we'll apply the strict option which enables a series of strict type checking options such as noImplicitAny, noImplicitThis, strictNullChecks, and so on.

"strict": true

The tsconfig.json file of our server project in its entirety will look like the following:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./build",
    "esModuleInterop": true,
    "strict": true
  }
}