VScode 自动编译TypeScript的方式

最新推荐文章于 2023-11-27 16:02:51 发布

albert528108

最新推荐文章于 2023-11-27 16:02:51 发布

阅读量692

点赞数

分类专栏： Angular

Angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、首先进入nodejs里安装typescript

npm install -g typescript

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

例：我的项目地址E:\example\ts，nodejs里 e:回车，复制地址(E:\example\ts)，点击nodejs右键，粘贴，回车，即进入项目目录E:\example\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:\example\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代码。

作者：吴佳浩
链接：https://www.jianshu.com/p/aa4145604ca9
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

albert528108

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VScode 自动编译TypeScript的方式

1、首先进入nodejs里安装typescriptnpm install -g typescript2、创建相应的项目目录，打开nodejs 进入当前项目目录例：我的项目地址E:\example\ts，nodejs里 e:回车，复制地址(E:\example\ts)，点击nodejs右键，粘贴，回车，即进入项目目录E:\example\ts。3、创建tsconfig.jso...
复制链接

扫一扫