- 下载并安装VS Code
- 下载并安装Node.js,安装时选择配置PATH,安装完毕后输入node -v显示版本号,如果正常显示意味着安装成功。
- 继续输入npm -v显示npm的版本号
- 利用npm下载并安装TypeScripte编译器
npm install -g typescript 安装完毕后输入tsc -v查看版本号,如果可以显示则安装成功:
进入VS Code编写ts代码,这里我创建了一个名为test.ts的文件,文件内容如下:
class Person {
hobby: string;
constructor(hobby: string) {
this.hobby = hobby;
}
echo() {
return '我就喜欢:' + this.hobby;
}
}
let person = new Person('抽烟,喝酒,烫头');
let hobby = person.echo();
console.log(hobby);
- 在命令行中输入tsc test.ts,将ts文件编译为js文件,编译后的js文件内容为:
var Person = /** @class */ (function () {
function Person(hobby) {
this.hobby = hobby;
}
Person.prototype.echo = function () {
return '我就喜欢:' + this.hobby;
};
return Person;
}());
var person = new Person('抽烟,喝酒,烫头');
var hobby = person.echo();
console.log(hobby);
相较之下就可以看出为什么说TypeScript是JavaScript的语法糖。使用TypeScript的语法糖可以进行“传统”的面向对象编程。
8. 上述第7步是标准的ts编译js的过程。我们还可以在VS Code重视会用“配置文件”来完成上述的编译工作。首先创建一个tsconfig.json文件:
{
"compilerOptions": {
"target": "es2015",
"noImplicitAny": false,
"module": "commonjs",
"removeComments": true
//"sourceMap": false,
//"outDir": "Golang/TypeScript/",
//"include":[
// "ts"
// ],
//"exclude": [
// "js"
// ]
}
}
tsconfig.json提供编译时的配置内容,各个主要参数说明如下:
target:编译之后生成的JavaScript文件需要遵循的标准。有三个候选项:es3、es5、es2015。
noImplicitAny:为false时,如果编译器无法根据变量的使用来判断类型时,将用any类型代替。为true时,将进行强类型检查,无法推断类型时,提示错误。
module:遵循的JavaScript模块规范。主要的候选项有:commonjs、AMD和es2015。为了后面与node.js保持一致,我们这里选用commonjs。
removeComments:编译生成的JavaScript文件是否移除注释。 sourceMap:编译时是否生成对应的source
map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后,出错时可借助同名的source map文件查找源文件中错误位置。
outDir:编译输出JavaScript文件存放的文件夹。
include、exclude:编译时需要包含/剔除的文件夹。
凡是使用VS Code进行代码构建时,都会在项目根目录下有一个自带的.vscode文件夹,在这个文件夹下创建tasks.json文件:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for thedocumentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "."],
"showOutput": "always",
"problemMatcher": "$tsc"
}
这里会以tsc -p的方式来执行编译,而-p的作用就是告诉tsc编译器根据tsconfig.json内容来进行编译。
tasks.json编辑完毕后,在VS Code中按下ctrl+shift+b执行编译。
编译后的test.js文件内容为:
class Person {
constructor(hobby) {
this.hobby = hobby;
}
echo() {
return '我就喜欢:' + this.hobby;
}
}
let person = new Person('抽烟,喝酒,烫头');
let hobby = person.echo();
console.log(hobby);
与之前的test.js相比,少了/**@Class*/注释
- 在VS Code中进行调试。
点击“调试”按钮,此时调试的运行环境处显示“没有配置”,点击右侧有红点的齿轮,选择调试环境为Node.js,选择后会在.vscode文件夹下自动生成一个launch.json,文件内容如下:
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/test.js"
}
]
}
其中program配置项就是用来指定调试时要运行的js文件。还有更多的配置项可以参考相关文档。
10. 点击绿色按钮进行调试,控制台上输出响应的内容: