VScode 自动编译TypeScript的方式

1、首先进入nodejs里安装typescript

npm install -g typescript

2、创建相应的项目目录，打开nodejs 进入当前项目目录

例：我的项目地址E:examplets，nodejs里 e:回车，复制地址(E:examplets)，点击nodejs右键，粘贴，回车，即进入项目目录E:examplets。

3、创建tsconfig.json文件

    tsc --init

4、打开tsconfig.json文件修改和删除相应配置（如果想快速修改配置，请复制下列配置）

{  "compilerOptions": {   "target": "es5",   "noImplicitAny": false,   "module": "amd",   "removeComments": false,   "sourceMap": false,   "outDir": "src/js"//你要生成js的目录
  }
}

5、创建src目录，打开vscode新建文件，保存到src下扩展名为.html的文件，然后在编辑器里代码区输入此快捷方法，快速创建html布局代码

！+tab
自行添加js引入代码

6、回到E:examplets 目录，创建ts文件夹，然后新建ts为扩展名的ts文件(test.ts)，测试代码如下：

class Student {
    firstName : string;
    lastName : string; 
    constructor(fiestName : string,  lastName : string) {        this.firstName = fiestName;        this.lastName = lastName;
    }
    greeter() {        return `Hello,您好${this.firstName}${this.lastName}`;
    }
}var user = new Student("王","小明");var ele = document.body || document.documentElement;
ele.innerHTML = user.greeter();
　　

7、点击菜单 任务-运行任务，点击 tsc:构建-tsconfig.json8、此时src目录下会自动生成js/test.js文件了；打开test.js文件，点击编辑器的拆分编辑器菜单，即把js和ts文件拆开，自行编辑ts文件的时候，右侧会自动生成js代码。

（如果此时不会自动生成js代码，点击菜单 任务-运行任务 点击 tsc:监视-tsconfig.json 然后就同步了）

作者：吴佳浩
链接：https://www.jianshu.com/p/aa4145604ca9