TypeScript作为JavaScript的超集，让JavaScript越来越像一门“正经的”语言。和纯粹的JavaScript语言相比，TypeScript可以提供静态的类型检查，可以提供类的语法糖（这一点在ES6中也已经实现了），让程序更加规范和紧凑，为使用JavaScript开发大型项目提供了必要的条件。在Visual Studio Code中使用TypeScript，需要做一些配置，VS Code也提供了规范的示例项目，也可以通过clone这些项目快速开始你的TypeScript工程。
1. TypeScript安装
由于TypeScript只是JavaScript语言的超集，而TypeScript程序最终也是要“编译”成JavaScript文件运行，因此需要安装JavaScript的运行环境作为前提，亦即首先需要安装Nodejs，并使用npm包管理器安装typescript。
npm install -g typescript tsc --version #检查TypeScript安装情况
VS Code的官方文档以一个简单的HelloWorld示范项目来说明TypeScript使用和配置方法（没有涉及TypeScript语言的细节）。创建一个helloworld文件夹，并在其中新建helloworld.ts文件如下。
let message: string = 'Hello World'; console.log(message);
在终端中输入tsc helloworld.ts即可将typescript文件编译为helloworld.js文件，在这个例子中可以看到编译生成的JavaScript文件与TypeScript文件几乎完全相同，虽然在大部分情况下并不是这样。
在书写TypeScript程序时，VS Code的IntelliSense功能会自动起作用，以实现程序、变量的自动补全和纠错。
2. tsconfig.json配置文件
在TypeScript项目根文件夹下，除了通常的nodejs项目配置文件package.json外，还需要额外的tsconfig.json配置文件，来告诉编辑器该如何配置TypeScript。该文件可以手动输入，也可以通过tsc –init 命令自动生成。官方文档提供的一个最基础的tsconfig.json配置文件如下：
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir":"out",
"sourceMap": true
}
}
其中target参数为编译输出的JavaScript 版本，一般为ES5，outDir参数为输出的JavaScript文件所在的文件夹。通常，转换后的JavaScript文件会变得复杂而难以调试，很难和原始的TypeScript文件一一对应，而sourceMap参数配置就是为了保持源文件和编译后文件之间的联系，设置为true可以通过.ts文件进行调试，方便使用。
3. TypeScript项目构建和调试
在VS Code中选择终端–>配置默认构建任务，并在弹出的选项中选择Nodejs项目，会自动生成类似如下的task.json文件。创建完该文件后，可以通过终端–>运行任务来运行项目构建任务。
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc"
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
类似地，在运行(Run)目录下选择新建或打开配置文件，也会生成默认的launch.json文件。
{
// 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": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program":"${workspaceFolder}/helloworld.ts",
"preLaunchTask": "tsc: build - tsconfig.json",
"outFiles": ["${workspaceFolder}/out/**/*.js"]
}
]
}
在launch.json文件中配置必要的参数后，即可像调试C#等现代化编程语言一样设置断点、单步执行等调试TypeScript项目了。这其中,preLaunchTask任务也包含了前一步构建内容在其中，outFiles也和tsconfig.json中配置相类似。
如果编写的TypeScript项目是用于前端（客户端）运行的（与前面依赖nodejs的情况不同），如果需要使用VS Code调试，需要先安装相应的浏览器（如Chrome）插件（如Debugger for Chrome），并且launch.json文件也有所不同，在设置完后运行–>开始调试（F5）命令后，会弹出Chrome浏览器并在其中进行调试。
4.自动化构建工具
在TypeScript项目中，如果每修改一次文件，就要重新编译运行的话效率太低，因此TypeScript也提供了热监视模式，只要文件出现修改就马上开始自动重新编译，这可以通过tsc –watch命令简单实现，当然也可以通过gulp、grunt等自动化构建工具自动完成。gulp和grunt在使用时各有利弊，这里以grunt为例。首先需要在全局和项目中安装如下组件:
npm install -g grunt-cli npm install --save-dev grunt npm install grunt-exec --save-dev npm install grunt-contrib-watch --save-dev
并且需要在项目根目录下新建一个GruntFile.js文件并进行修改，以实现项目修改后自动重启调试的功能。
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-exec');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
files: ['**/*.ts'],
tasks: ['exec:run_tsc']
},
exec: { run_tsc: { cmd: 'tsc' } }
});
grunt.registerTask('default', ['watch']);
配置完成后，在命令行输入grunt即可实现项目自动构建及调试热监控等功能。