vscode 下的 typescript 自动编译方法

1、首先进入nodejs里安装typescript

npm install -g typescript

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

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

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引入代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="js/test.js"></script><!--自行添加js引入-->
</head>
<body>
    
    
</body>
</html>

 

6、回到E:\demo\ts 目录,创建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.json 

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

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

 

posted @ 2018-01-27 17:38  智取小师妹  阅读(17037)  评论(0编辑  收藏  举报