[Edit]

Node.js - use TypeScript instead of JavaScript in VS Code

1 contributors

2 contributions

0 discussions

0 points

Created by:

Welsh

902

In this article, we would like to show you how to use TypeScript instead of JavaScript in VS Code for Node.js projects.

Note:

You can download the github project for the article here - dirask-tutorials · GitHub

1. Install TypeScript globally

Edit

If you have already installed TypeScript compiler globally, you can skip this step.

xxxxxxxxxx
 
npm install -g typescript

Note:

Go to this article if you want to know more about TypeScript installation process.

2. Create `tsconfig.json` file

Edit

xxxxxxxxxx
 
{
    "compilerOptions": {
        "target": "ES5",            // JavaScript version to which we map TypeScript
        "module": "CommonJS",       // we will use the module mechanism in Node.js, i.e. 'require'
        "moduleResolution": "Node", // process that compiler uses to figure out what an import refers to
        "baseUrl": "./src",         // optional localization of the folder with source files during modules mapping
        "outDir": "./dist",         // the output folder where we get the built js files
        "sourceMap": true           // used to enable debbuging TypeScript in Node.js and VS Code
    },
    "include": [
        "src/**/*.ts"   // describes what files to import for compilation - searching for .ts files in whole directory
    ]
}

3. Configuration for debugging Node.js applications in VS Code

Edit

Create .vscode directory with launch.json file.

launch.json:

xxxxxxxxxx
 
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "My Application", // configuration name
      "program": "dist/index.js" // executable file of the entire application (compiled index.ts to js)
    }
  ]
}

4. Build and run the application

Edit

Build the application with the following command:

xxxxxxxxxx
 
tsc --build

Note:

After this command the dist/ directory is created. Go to the Project Structure section to see the screenshot.

Run the application using:

xxxxxxxxxx
 
node ./dist/index.js

5. Application development

Edit

TypeScript compiler during development automatically recompiles files changed by developer. You can run application in development mode with the following command: