Post
Ask Question

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. 
  1. {  
  2.  "version": "0.2.0",  
  3.  "configurations": [{  
  4.   "type": "node",  
  5.   "request": "launch",  
  6.   "name": "Launch",  
  7.   "program": "${workspaceRoot}\\myApp.ts",  
  8.   "cwd": "${workspaceRoot}",  
  9.   "outFiles": ["${workspaceRoot}/js/**/*.js"],  
  10.   "sourceMaps": true  
  11.  }, {  
  12.   "type": "node",  
  13.   "request": "attach",  
  14.   "name": "Attach",  
  15.   "port": 5858,  
  16.   "outFiles": ["ES5"],  
  17.   "sourceMaps": true  
  18.  }]  
  19. }   
 
Tasks.json file configuration is given below. 
  1. {  
  2.  "version": "0.1.0",  
  3.  "command": "tsc",  
  4.  "isShellCommand": true,  
  5.  "args": ["--target", "ES5", "--outdir", "js", "--sourceMap", "--watch", "myApp.ts"],  
  6.  "showOutput": "always",  
  7.  "problemMatcher": "$tsc",  
  8.  "echoCommand": true  
  9. }   
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.
  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.


Similar Articles