首页 > 前端日志 > 前端技巧 > windows 下 使用 VScode 自动编译 TypeScript 的方法
2018
08-28

windows 下 使用 VScode 自动编译 TypeScript 的方法

假设已经使用 NPM 安装好了 TypeScript 的情况下,如果没有安装,请自行安装。

为了教程方便,我们从一个空目录开始,并假设这个目录为初始目录。

在你的项目地址打开命令行工具,【shift + 右键】,选择【在此处打开命令窗口】。

进行 TypeScript 的初始化工作:

tsc --init

 

该命令执行完毕之后,会生成 tsconfig.json 配置文件,修改该配置文件,删除里面的所有内容,并替换成:

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

 

正常来说,我们会把所有的与web相关的文件都放到 src 这个目录里面,包括你的html和css文件。

好,那么我们就新建一个 src 目录。然后在初始新建一个 ts 目录,我们的 TypeScript 会放在 ts 目录里面。

打开我们的 VScode 编辑器,然后把我们的初始目录拖进去,在 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();

 

点击菜单,任务-运行任务,点击 tsc:构建-tsconfig.json 。

此时src目录下会自动生成js/test.js文件了;打开test.js文件,点击编辑器的拆分编辑器菜单,即把js和ts文件拆开,自行编辑ts文件的时候,右侧会自动生成js代码。

我们在html文件中,记得引入 js 代码。

此时,整个目录结构如下:

|-ts/
  |--test.ts
|-src/
  |--index.js
  |--js/
     |---test.js

 

最后编辑:
作者:eatdao
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。