1，首先安裝 node 環境，具體安裝過程我就不多說了

2，檢查好node環境後，就開始通過npm 安裝 TypcScript 編譯器。

npm i g typescript 

3，進行初始化， 建立tsconfig.json 檔案,記錄一些編譯成JS的配置選項

tsc -init

4，開啟tsconfig.json檔案，已經預設好了一些配置

   {
     "compilerOptions": {

/* 基本選項 */
      "target": "es5", // 指定 ECMAScript 目標版本: 'ES3'(default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
      "module": "commonjs", // 指定使用模組: 'commonjs', 'amd',
      'system', 'umd' or 'es2015'
      "lib": [], // 指定要包含在編譯中的庫檔案
      "allowJs": true, // 允許編譯 javascript 檔案
      "checkJs": true, // 報告 javascript 檔案中的錯誤
      "jsx": "preserve", // 指定 jsx 程式碼的生成: 'preserve',
      'react-native', or 'react'
      "declaration": true, // 生成相應的 '.d.ts' 檔案
      "sourceMap": true, // 生成相應的 '.map' 檔案
      "outFile": "./", // 將輸出檔案合併為一個檔案
      "outDir": "./", // 指定輸出目錄
      "rootDir": "./", // 用來控制輸出目錄結構 --outDir.
      "removeComments": true, // 刪除編譯後的所有的註釋
      "noEmit": true, // 不生成輸出檔案
      "importHelpers": true, // 從 tslib 匯入輔助工具函式
      "isolatedModules": true, // 將每個檔案做為單獨的模組 （與
      'ts.transpileModule' 類似）.
/* 嚴格的型別檢查選項 */
     "strict": true, // 啟用所有嚴格型別檢查選項
     "noImplicitAny": true, // 在表示式和宣告上有隱含的 any型別時報錯
     "strictNullChecks": true, // 啟用嚴格的 null 檢查
     "noImplicitThis": true, // 當 this 表示式值為 any 型別的時候，生成一個錯誤
     "alwaysStrict": true, // 以嚴格模式檢查每個模組，並在每個檔案里加入 'use strict'
 /* 額外的檢查 */
    "noUnusedLocals": true, // 有未使用的變數時，丟擲錯誤
    "noUnusedParameters": true, // 有未使用的引數時，丟擲錯誤
     "noImplicitReturns": true, // 並不是所有函式裡的程式碼都有返回值時，丟擲錯誤
     "noFallthroughCasesInSwitch": true, // 報告 switch 語句的 fallthrough 錯誤。（即，不允許 switch 的 case 語句貫穿）

 /* 模組解析選項 */
    "moduleResolution": "node", // 選擇模組解析策略： 'node' (Node.js)
    or 'classic' (TypeScript pre-1.6)
     "baseUrl": "./", // 用於解析非相對模組名稱的基目錄
      "paths": {}, // 模組名到基於 baseUrl 的路徑對映的列表
     "rootDirs": [], // 根資料夾列表，其組合內容表示專案執行時的結構內容
     "typeRoots": [], // 包含型別宣告的檔案列表
     "types": [], // 需要包含的型別宣告檔名列表
     "allowSyntheticDefaultImports": true, // 允許從沒有設定預設匯出的模組中默匯入。
 /* Source Map Options */
     "sourceRoot": "./", // 指定偵錯程式應該找到 TypeScript 檔案而不是原始檔的位置
     "mapRoot": "./", // 指定偵錯程式應該找到對映檔案而不是生成檔案的位置
     "inlineSourceMap": true, // 生成單個 soucemaps 檔案，而不是將sourcemaps 生成不同的檔案
    "inlineSources": true, // 將程式碼與 sourcemaps 生成到一個檔案中，要求同時設定了 --inlineSourceMap 或 --sourceMap 屬性
/* 其他選項 */
     "experimentalDecorators": true, // 啟用裝飾器
     "emitDecoratorMetadata": true // 為裝飾器提供元資料的支援
      }
 }

5，在資料夾裡新建一個test.ts，執行 tsc test.ts

class bird{
    work: string;
    constructor(work: string) {
        this.work = work;
    }
    hobby() {
        return '我就喜歡：' + this.work;
    }
}
let penguin = new bird('吃飯，睡覺，打豆豆');
let work =penguin.hobby(); 
console.log(work);

然後執行 tsc test.ts

會生成一個根據配置編譯過的test.js

var bird = /** @class */ (function () {
    function bird(work) {
        this.work = work;
    }
    bird.prototype.hobby = function () {
        return '我就喜歡：' + this.work;
    };
    return bird;
}());
var penguin = new bird('吃飯，睡覺，打豆豆');
var work = penguin.hobby();
console.log(work);

　　這就已經初步完成了ts的編譯，但是每次更改程式碼都需要手動執行編譯，所以還可以使用監視模式，實現自動編譯

在vs Code 中使用快捷鍵Ctrl + Shift + b 開啟編譯，首次編譯需要進行選擇編譯模式

選擇watch,之後ts的改動就會自動編譯到js中，如果想要重新選擇，只需要再次使用快捷鍵Ctrl + Shift + b，重新選擇編譯方式，