VS Code搭建TypeScript开发环境，codetypescript

VS Code搭建TypeScript开发环境，codetypescript

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);

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*/注释

{
    // 使用 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. 点击绿色按钮进行调试，控制台上输出响应的内容：