Set Up Configuration Files For TypeScript Using Visual Studio Code

Introduction

This is a fresh series of articles to learn TypeScript from scratch, using Visual Studio Code. Visual Studio Code is a new editor given by Microsoft. It’s a very rich tool in comparison to Sublime Text and others. This is my personal observation.

In the last article, you read about Getting Started With Typescript Using Visual Studio Code. Here, the continuation of the last article is that we are going to install the required configuration files like launch.json and tasks.json files.

Configuration settings for launch.json are given below in the screenshot.

{
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "Launch",
"program": "${workspaceRoot}\\myApp.ts",
"cwd": "${workspaceRoot}",
"outFiles": ["${workspaceRoot}/js/**/*.js"],
"sourceMaps": true
}, {
"type": "node",
"request": "attach",
"name": "Attach",
"port": 5858,
"outFiles": ["ES5"],
"sourceMaps": true
}]
}

Tasks.json file configuration is given below.

{
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["--target", "ES5", "--outdir", "js", "--sourceMap", "--watch", "myApp.ts"],
"showOutput": "always",
"problemMatcher": "$tsc",
"echoCommand": true
}

You can get IntelliSense on tasks.json variables, their values with hover and trigger smart completions with Ctrl+Space.

In the Command Palette (Ctrl+Shift+P), you can filter on 'task' and can see the various task-related commands.

Select the Tasks

Configure Task Runner command and you will see a list of task runner templates. Select others to create a task, which runs an external command.

You should now see a tasks.json file in your Workspace .vscode folder with the content given below.

You can read more details from the given link.

Here is a glimpse of the Visual Studio Code for debugging purposes and it looks as shown below.

There is a lot to discuss in the upcoming articles.

Code writing and IntelliSense
Debugging process and configuration
Class and constructor in TypeScript
Any and Let Keyword usage
Interface and DuckTyping
Modules in Typescript and Exporting technique
Setter and Getter Property in Typescript
Tuples
Enums, Watch and Call Stack for variables
Will add more

I hope you have inferred the basics of TypeScript with Node and Visual Studio Code.