前言

讓我們延續前幾天的主題，今天將介紹第四篇語言的應用，覺得 JavaScript 過於隨意，在開發大型 APP 時遇到不少坑，因此需要更多的規範來約束 JavaScript，進而誕生的語言： TypeScript。

前提

使用 TypeScript 需要安裝 npm package。

npm install -g typescript

安裝完成後，檢查版本。

tsc -v
# Version 3.6.3

該有的都有支援

畢竟 VS Code 的功能是協助開發程式，所以這幾天的介紹文內提到的功能、支援，幾乎都能支援開發 TypeScript。

以下列出支援列表：

IntelliSense

請參考拙作：Day 07: 這就是我喜歡的小地方：IntelliSense。

至於語言包的部分，完成安裝上述提到的 package 後，就能擴充 IntelliSense 了。

Snippets

請參考拙作：

• Day 08: 手工打造專屬於自己的 Snippets（一）。
• Day 09: 手工打造專屬於自己的 Snippets（二）。

hover

請參考昨日：

• Day 17: 使用 VS Code 來開發 JavaScript。

預覽函式要帶入的參數內容

請參考昨日：

• Day 17: 使用 VS Code 來開發 JavaScript。

排版，Formatting

畢竟是 JavaScript 的衍伸語言，因此 VS Code 內建排版功能，按下快捷鍵（Windows: Ctrl + K, Ctrl + F；macOS: ⌘K, ⌘F）即可觸發。

如果有修改的需求，方法類似於昨天：：

進入設定修改

步驟如下：

• 滑鼠移到左下方，按下齒輪。
• 點擊設定。
• 開啟設定分頁後，在上方搜尋欄位，輸入 typescript.format.*。
• 
• 搜尋結果會顯示相關設定，接下來就自己研究吧。

使用 Extension

目前標注有支援的，只有一款：

• Prettier - Code formatter。

快捷鍵的應用

Peek Definition 與 Rename 。
請參考拙作：Day 05: 操作上總是有些小秘訣的。

重構，Refactor

請參考昨日：

• Day 17: 使用 VS Code 來開發 JavaScript。

整理匯入檔案，Organize Imports

請參考昨日：

• Day 17: 使用 VS Code 來開發 JavaScript。

Linters

需要 Extension 的支援：

• TSLint。

相關應用

tsconfig.json

如果要讓 VS Code 對 TypeScript 有更好的支援性，那必須設定 tsconfig.json。

// 基本版
{
  "compilerOptions": {
    "target": "es5", // 轉換為 ES 5。
    "module": "commonjs" // 模組的風格。
  }
}

設定的越詳細，越能理解是為了讓專案對 TypeScript 的支援更好，例如使用 TypeScript 多年的 Angular，新建的專案就有三個跟 tsconfig.json 有關。最主要的 tsconfig.json設定頗豐富：

// Angular 的初始設定
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

編譯，compiler

手動

步驟如下：

• 建立檔案：foobar.ts，內容如下：

function foobar (a: string, b: string) {
  return a + "----" + b;
}

console.log(foobar("foo", "bar"));

• 開啟終端機，輸入指令

tsc foobar.ts

• 轉換成 foobar.js。

明顯地，手動轉換完全沒有使用到 VS Code，頂多就是使用內嵌的終端機進行操作。

自動

沒錯，這類的工作最適合交給 Tasks 處理：

步驟如下：

• 安裝 Extension：Task Explorer。
• 建立 tsconfig.json。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./out"
  }
}

• 活動列選擇 檔案總管，將滑鼠移動到提要欄位的下方，點擊監看。
  • 
• 下方面板會開啟終端機，顯示以下內容表示監看中，此時修改 .ts 的內容，將會自動轉換成 .js。

[23:18:06] File change detected. Starting incremental compilation...
[23:18:06] Found 0 errors. Watching for file changes.

Debugger

前置作業是，修改 tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "out",
    "sourceMap": true // 新增這行
  }
}

剩下的操作內容，請參考拙作：

• Day 11: 總是被忽視的功能：debugging（一）。
• Day 12: 總是被忽視的功能：debugging（二）。

如果想使用最新版本（非穩定版）

步驟如下：

• 安裝 Extension：JavaScript and TypeScript Nightly。
• 安裝完成後，可以在狀態列確認版本。
  • 
• 如果想使用穩定版，移除 Extension 即可。

結論

如果你是一位前端開發者，那熟悉 TypeScript 已經是無法避免的。
目前三大框架，Angular 一定要使用 TypeScript，React & Vue 社群也開始推廣。
畢竟強型別的語言，能有效提升大型程式的開發、維護。

所以好 TypeScript ，不學嗎？