• vscode 下的 typescript 自动编译方法


    1、首先进入nodejs里安装typescript

    npm install -g typescript

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

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

    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 s 目录,创建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 然后就同步了) 

  • 相关阅读:
    最简单的 Java内存模型 讲解
    Chrome快捷键吐血整理
    【并发编程】InheritableThreadLocal使用详解
    【并发编程】Object的wait、notify和notifyAll方法
    【并发编程】Thread类的详细介绍
    【软件工具】easyExcel简明使用指南
    【并发编程】实现多线程的几种方式
    【并发编程】Java并发编程传送门
    CODING 研发管理系统上线全球加速,助力企业跨区域协作
    上帝的归上帝,凯撒的归凯撒—— CODING 权限管理更新
  • 原文地址:https://www.cnblogs.com/yanliangnh/p/8366655.html
Copyright © 2020-2023  润新知