TypeScript 簡明教程：安裝 TypeScript

Hopsken發表於2019-03-01
TypeScript

本文為系列文章《TypeScript 簡明教程》中的一篇。

  1. 認識 TypeScript
  2. 安裝 TypeScript

前言

通過前一篇文章，相信大家對 TypeScript 有了基本的瞭解，對 TypeScript 的價值也有了一定的認識。不過，光說不練假把式，本節我們學習如何搭建 TypeScript 的開發環境。

TypeScript 官方提供了一個 Playground。你可以在左側輸入 TypeScript 程式碼，右側會自動顯示出編譯後的 JavaScript 程式碼，十分方便。

事實上，你完全可以跳過下面內容，直接在 Playground 中書寫後面教程中的 TypeScript 程式碼，待到大概熟悉 TypeScript 的語法後，再回頭看本節內容。

全域性安裝 TypeScript

使用如下命令安裝 TypeScript 命令列工具：

npm install -g typescript
複製程式碼

TypeScript 簡明教程：安裝 TypeScript

從安裝結果我們可以看出，以上命令在全域性環境下安裝了兩條命令：tsc 和 tsserver。其中，tsserver 主要用於為編輯器和 IDE 等 提供語義支援，一般來說不常用到。

常用的是 tsc 命令。tsc 為 typescript compiler 的縮寫，即 TypeScript 編譯器，用於將 TS 程式碼編譯為 JS 程式碼。使用方法很簡單：

tsc index.ts
複製程式碼

作為約定，使用 TypeScript 編寫的檔案應以 .ts 為字尾。用 TypeScript 編寫 React 時，應使用 .tsx 字尾，而不是 .jsx。

Example

首先，我們新建一個 TS 檔案 main.ts。輸入以下程式碼：

// 建立一個 sayHi 函式，具有一個引數 person
// person 必須為字串
function sayHi(person: string) {
    return `Hi, ${ person  }`
}

sayHi('Hopsken')
複製程式碼

使用 tsc 命令編譯，它會在當前目錄下生成編譯好的 JS 檔案。

tsc main.ts
複製程式碼

TypeScript 簡明教程：安裝 TypeScript

編譯後的 JS 程式碼：

function sayHi(person) {
    return "Hi, " + person;
}
sayHi("Hopsken");
複製程式碼

可以看到，原先 TypeScript 中的型別註解已經被移除，生成的檔案中不包含任何型別判斷的程式碼。

此外，細心的同學可能已經注意到了，原先的 TS 程式碼中我們使用 ES6 的模板字串語法，但在生成的 JS 中，編譯器自動將其轉換成了 ES5 的語法。這就是 TypeScript 為我們帶來的另一個好處，有了它，我們就可以放心的使用 JavaScript 新特性了。

那麼，如果 TS 原始碼中存在錯誤呢？比如說，在本該傳入 string 的地方傳入了 number。我們在上述程式中做出如下修改：

sayHi(42)
複製程式碼

再次編譯，

TypeScript 簡明教程：安裝 TypeScript

可以看到，編譯器會自動報出相關錯誤，並給出相關提示。

注意，儘管編譯器會報出錯誤，但其仍然會生成『有問題』的 JS 檔案！

tsconfig.json

一般來說，每個 TypeScript 都應該有一個 tsconfig.json 檔案，表明這是一個 TypeScript 專案。通過 tsconfig.json 檔案，我們可以配置 TypeScript 編譯時所使用的引數。

如果沒有指定輸入檔案，直接呼叫 tsc 命令的話，編譯器會從當前目錄開始，逐級向上尋找 tsconfig.json 檔案。

通過 --project(-p) 引數，可以要求編譯器使用指定目錄（或檔案路徑）下的 tsconfig.json 檔案。

使用以下命令初始化一個 tsconfig.json 檔案。

tsc --init
複製程式碼

下面介紹幾個常用的配置項，完整列表請參考 這裡。

{
  "compilerOptions": {
    // 指定輸出的 JS 程式碼所使用的 ECMAScript 版本，可選值為：ES3、ES5、ES2015、ES2016、ES2017、ES2018 和 ESNEXT。請根據具體的相容性要求選擇。
    "target": "es5",
    // 指定輸出的 JS 程式碼所使用的模組化方案，可選值為：none、commonjs、amd、system、umd、es2015 或 ESNext。
    "module": "commonjs",
    // 指定編譯過程中要使用的庫，視具體情況而定。
    "lib": [],
    // 是否編譯 JS 檔案。
    "allowJs": true,
    // 是否報告 JS 原始碼中的錯誤。
    "checkJs": true,
    // 啟用 JSX 語法，可選值為 perserve、react-native、react。
    "jsx": "preserve",
    // 是否生成相關的 '.d.ts' 宣告檔案。
    "declaration": true,
    // 是否生成 sourceMap 檔案
    "sourceMap": true,
    // 將輸出的 JS 程式碼整合為單個檔案
    // "outFile": "./",
    // 指定輸出目錄
    "outDir": "./",
    // 指定原始碼根目錄
    "rootDir": "./",
    // 是否引入 tslib
    "importHelpers": true,
    // 當目標版本為 'ES5' 或 'ES3'，用以提供完整的解構、'for-of iterable' 支援
    "downlevelIteration": true,

    // 啟用所有嚴格型別檢查，區別於 JS 的 strict mode。
    "strict": true,
    // 使用 any 型別時必須明確宣告
    // "noImplicitAny": true,
    // 嚴格檢查 null 型別
    // "strictNullChecks": true,
    // 嚴格檢查函式型別
    // "strictFunctionTypes": true,
    // 嚴格檢查 bind、call、apply 型別
    // "strictBindCallApply": true,
    // 嚴格檢查類屬性初始化
    // "strictPropertyInitialization": true,
    // 當 this 具有隱含 any 型別時報錯
    // "noImplicitThis": true,
    // 始終使用嚴格模式（指 JS 中的嚴格模式）
    // "alwaysStrict": true,

    /* 實驗性選項 */
    // 對 ES7 中的修飾器 decorator 提供實驗性支援
    "experimentalDecorators": true,
  }
}
複製程式碼

下期預告

從下一期開始，我們將正式介紹 TypeScript 的基本語法。下一節，我們將學習 TypeScript 中的基本型別和型別推論。

附：關於編輯器

目前，主流的編輯器都支援 TypeScript。不過，這裡還是要著重推薦一下 Visual Studio Code。

它是一款免費、開源、跨終端的編輯器。由 MicroSoft 開發，與臃腫的 Visual Studio 系列 IDE 不同，這是一款現代化、輕量級的編輯器。

最重要的是，VSCode 本身就是用 TypeScript 編寫的，自身內建了 TypeScript 支援。不管是程式碼補全、介面提示，還是定義跳轉、程式碼重構等等，都可以輕鬆應對。

獲取其他編輯器或 IDE 對 TypeScript 的支援：

相關文章