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。

  1. npm install -g typescript
  2. tsc --version #检查TypeScript安装情况

VS Code的官方文档以一个简单的HelloWorld示范项目来说明TypeScript使用和配置方法（没有涉及TypeScript语言的细节）。创建一个helloworld文件夹，并在其中新建helloworld.ts文件如下。

  1. let message: string = 'Hello World';
  2. 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配置文件如下：

  1. {
  2.   "compilerOptions": {
  3.     "target": "es5",
  4.     "module": "commonjs",
  5.     "outDir":"out",
  6.     "sourceMap": true
  7.   }
  8. }

其中target参数为编译输出的JavaScript 版本，一般为ES5，outDir参数为输出的JavaScript文件所在的文件夹。通常，转换后的JavaScript文件会变得复杂而难以调试，很难和原始的TypeScript文件一一对应，而sourceMap参数配置就是为了保持源文件和编译后文件之间的联系，设置为true可以通过.ts文件进行调试，方便使用。

3. TypeScript项目构建和调试

在VS Code中选择终端—>配置默认构建任务，并在弹出的选项中选择Nodejs项目，会自动生成类似如下的task.json文件。创建完该文件后，可以通过终端—>运行任务来运行项目构建任务。

  1. {
  2.     // See https://go.microsoft.com/fwlink/?LinkId=733558 
  3.     // for the documentation about the tasks.json format
  4.     "version": "2.0.0",
  5.     "tasks": [
  6.         {
  7.             "type": "typescript",
  8.             "tsconfig": "tsconfig.json",
  9.             "problemMatcher": [
  10.                 "$tsc"
  11.             ],
  12.             "group": {
  13.                 "kind": "build",
  14.                 "isDefault": true
  15.             }
  16.         }
  17.     ]
  18. }

类似地，在运行(Run)目录下选择新建或打开配置文件，也会生成默认的launch.json文件。

  1. {
  2.     // Use IntelliSense to learn about possible attributes.
  3.     // Hover to view descriptions of existing attributes.
  4.     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  5.     "version": "0.2.0",
  6.     "configurations": [
  7.         {
  8.             "type": "node",
  9.             "request": "launch",
  10.             "name": "Launch Program",
  11.             "skipFiles": [
  12.                 "<node_internals>/**"
  13.             ],
  14.             "program":"${workspaceFolder}/helloworld.ts",
  15.             "preLaunchTask": "tsc: build - tsconfig.json",
  16.             "outFiles": ["${workspaceFolder}/out/**/*.js"]
  17.         }
  18.     ]
  19. }

在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为例。首先需要在全局和项目中安装如下组件:

  1. npm install -g grunt-cli
  2. npm install --save-dev grunt
  3. npm install grunt-exec --save-dev
  4. npm install grunt-contrib-watch --save-dev

并且需要在项目根目录下新建一个GruntFile.js文件并进行修改，以实现项目修改后自动重启调试的功能。

  1. module.exports = function (grunt) {
  2.    grunt.loadNpmTasks('grunt-contrib-watch');
  3.    grunt.loadNpmTasks('grunt-exec');
  4.    grunt.initConfig({
  5.        pkg: grunt.file.readJSON('package.json'),
  6.        watch: {
  7.            files: ['**/*.ts'],
  8.            tasks: ['exec:run_tsc']
  9.        },
  10.        exec: { run_tsc: { cmd: 'tsc' } }
  11.    });
  12.    grunt.registerTask('default', ['watch']);

配置完成后，在命令行输入grunt即可实现项目自动构建及调试热监控等功能。

5.通过ts-node直接运行.ts文件

除了编译为js文件外，也可以通过安装ts-node包来直接运行typescript文件而无需编译。ts-node包并不会与typescript打包在一起，

  1. # 本地安装
  2. npm install -D ts-node
  3. npm install -D typescript
  5. # 全局安装 
  6. npm install -g ts-node
  7. npm install -g typescript

安装完成后，可以直接在命令行运行typescript文件，也可以仅输入ts-node进入交互式命令行REPL。

  1. # Execute a script as `node` + `tsc`. 
  2. ts-node script.ts
  4. # Starts a TypeScript REPL. 
  5. ts-node
  7. # Execute code with TypeScript. 
  8. ts-node -e 'console.log("Hello, world!")'
  10. # Execute, and print, code with TypeScript. 
  11. ts-node -p -e '"Hello, world!"'
  13. # Pipe scripts to execute with TypeScript. 
  14. echo 'console.log("Hello, world!")' | ts-node