Set Up Configuration Files For TypeScript Using Visual Studio Code

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. 

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "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. 

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "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 the glimpse of Visual Studio Code for debugging purposes and it looks  as shown below.

There is a lot to discuss in the upcoming articles.

1. Code writing and IntelliSense
2. Debugging process and configuration
3. Class and constructor in TypeScript
4. Any and Let Keyword usage
5. Interface and DuckTyping
6. Modules in Typescript and Exporting technique
7. Setter and Getter Property in Typescript
8. Tuples
9. Enums, Watch and Call Stack for variables
10. Will add more

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