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 然后就同步了）
