Node Quick Start Tutorial using TypeScript

tutorial.md

Download and install VS Code Install VS Code from: https://code.visualstudio.com/

Download and install Node Create a Project Folder & Open VS Code

mkdir ts-hello-world
cd ts-hello-world
code .

Create Node Project

npm init -y

Install Dependencies

npm install typescript mocha ts-node @types/node @types/mocha --save-dev

Add Scripts to NPM

• Open package.json
• find “scripts” section
• add “build” script ”build”: “tsc”

Configure TypeScript

npm run build -- --init

This generates a tsconfig.json file in your project root.

We'll need to modify it to generate source maps and output the JavaScript to the /dist folder.

• Open tsconfig.json
• find "inlineSourceMap"
• Uncomment it and set value to true
• find "outDir"
• Uncomment it and set value to "./dist"

Add .editorconfig (not required) EditorConfig for VS Code - Visual Studio Marketplace

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = true

Add src/HelloWorld.ts

class HelloWorld {
  public helloWorld() : string {
    return 'Hello World'
  }
}
export default HelloWorld;

Add src/HelloWorld.test.ts

import * as assert from 'assert';
import { HelloWorld } from './HelloWorld';

describe('Hello World test suite', function() {
  it('Can say Hello World', function() {
  const result = new HelloWorld().helloWorld();
  assert.equal(result, 'Hello World', `Should return: Hello World, but returned: ${result}`);
  });
});

Add src/Calc.ts

export class Calc {
  public add(num1: number, num2: number): number {
    return num1 + num2;
  }
  public subtract(num1: number, num2: number): number {
    return num1 - num2;
  }
}
export default Calc;

Add src/Calc.test.ts

import * as assert from 'assert';
import { Calc } from './Calc';

describe('Calc test suite', function() {
  let calc = new Calc();
  it('Can add', function() {
    let result = calc.add(5,5);
    assert.equal(result, 10, `Should return: 10, but returned: ${result}`);
  });

  it('Can subtract', function() {
    let result = calc.subtract(20,10);
    assert.equal(result, 10, `Should return: 10, but returned: ${result}`);
  });
});

Build

• Press cmd + shift + b
• Alternatively, run from a terminal:

npm run build

Add Default Build Task

• Press cmd + shift + p to open the command palette.
• Search for “Configure Default Build Task”
• Select npm: build

Add Test Task

• Press cmd + shift + p to open the command palette.
• Search “Configure Default Test Task”
• Select npm: test

Configure Test Task

• Open package.json
• find “scripts” section
• find “test” script
• replace with "test": "mocha --require ts-node/register --watch-extensions ts,tsx \"src/**/*.test.{ts,tsx}\"",

Run Tests

• Press cmd + shift + p
• Search “Run Test Task”
• Run tests

Debug while running your test suite

Open the debug pane by clicking the bug icon on the left side of VS Code. You can also use Command+Shift+D keyboard shortcut.

Click the gear icon. This will open the command palette when a launch.json file is not present. Click Node from the options. We aren't going to use the default configuration. Instead use this script:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Run Mocha Tests",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
            "args": [
                "--no-timeouts",
                "--colors",
                "--compilers",
                "ts:ts-node/register",
                "${workspaceRoot}/src/**/*.test.{ts,tsx}"
            ],
            "cwd": "${workspaceRoot}",
            "protocol": "inspector"
        }
    ]
}

Now you'll be able to set breakpoints in your code and run your test suite through the debugger built into VS Code. This is helpful because you can inspect your code when tests fail.