VScode 自動編譯TypeScript的方式

1、首先進(jìn)入nodejs里安裝typescript

npm install -g typescript

2、創(chuàng)建相應(yīng)的項目目錄,打開nodejs 進(jìn)入當(dāng)前項目目錄

例:我的項目地址E:\example\ts,nodejs里 e:回車,復(fù)制地址(E:\example\ts),點擊nodejs右鍵,粘貼,回車,即進(jìn)入項目目錄E:\example\ts。

3、創(chuàng)建tsconfig.json文件

    tsc --init

4、打開tsconfig.json文件修改和刪除相應(yīng)配置(如果想快速修改配置,請復(fù)制下列配置)

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

5、創(chuàng)建src目錄,打開vscode新建文件,保存到src下擴(kuò)展名為.html的文件,然后在編輯器里代碼區(qū)輸入此快捷方法,快速創(chuàng)建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 目錄,創(chuàng)建ts文件夾,然后新建ts為擴(kuò)展名的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、點擊菜單 任務(wù)-運行任務(wù),點擊 tsc:構(gòu)建-tsconfig.json

8、此時src目錄下會自動生成js/test.js文件了;打開test.js文件,點擊編輯器的拆分編輯器菜單,即把js和ts文件拆開,自行編輯ts文件的時候,右側(cè)會自動生成js代碼。

(如果此時不會自動生成js代碼,點擊菜單 任務(wù)-運行任務(wù) 點擊 tsc:監(jiān)視-tsconfig.json 然后就同步了)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容