在VS Code下配置并运行TypeScript 技术頭條網

2020-03-24 00:45:23 魏智勇

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。

<code>npm install -g typescript
tsc --version #检查TypeScript安装情况/<code>

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

<code>let message: string = 'Hello World';
console.log(message);/<code>

在终端中输入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配置文件如下：

<code>{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir":"out",
    "sourceMap": true
  }
}/<code>

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

3. TypeScript项目构建和调试

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

<code>{
    // 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
            }
        }
    ]
}/<code>

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

<code>{
    // 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>/**"
            ],
            "program":"${workspaceFolder}/helloworld.ts",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": ["${workspaceFolder}/out/**/*.js"]
        }
    ]
}/<node>/<code>

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

<code>npm install -g grunt-cli
npm install --save-dev grunt
npm install grunt-exec --save-dev
npm install grunt-contrib-watch --save-dev/<code>

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

<code>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']);/<code>

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

分享到:

閱讀更多 魏智勇 的文章

關鍵字: Node.js Stu TypeScript