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即可实现项目自动构建及调试热监控等功能。