TypeScript 簡明教程：安裝 TypeScript

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

1. 認識 TypeScript
2. 安裝 TypeScript

前言

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

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

事實上，你徹底能夠跳過下面內容，直接在 Playground 中書寫後面教程中的 TypeScript 代碼，待到大概熟悉 TypeScript 的語法後，再回頭看本節內容。

全局安裝 TypeScript

使用以下命令安裝 TypeScript 命令行工具：

npm install -g 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
複製代碼

編譯後的 JS 代碼：

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

能夠看到，原先 TypeScript 中的類型註解已經被移除，生成的文件中不包含任何類型判斷的代碼。

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

那麼，若是 TS 源碼中存在錯誤呢？好比說，在本該傳入 string 的地方傳入了 number。咱們在上述程序中作出以下修改：

sayHi(42)
複製代碼

再次編譯，

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

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

tsconfig.json

通常來講，每一個 TypeScript 都應該有一個 tsconfig.json 文件，代表這是一個 TypeScript 項目。經過 tsconfig.json 文件，咱們能夠配置 TypeScript 編譯時所使用的參數。

若是沒有指定輸入文件，直接調用 tsc 命令的話，編譯器會從當前目錄開始，逐級向上尋找 tsconfig.json 文件。

經過 --project(-p) 參數，能夠要求編譯器使用指定目錄（或文件路徑）下的 tsconfig.json 文件。

使用如下命令初始化一個 tsconfig.json 文件。

tsc --init
複製代碼

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

{
  "compilerOptions": {
    // 指定輸出的 JS 代碼所使用的 ECMAScript 版本，可選值爲：ES三、ES五、ES201五、ES201六、ES201七、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 的支持：

• Atom
• Sublime Text
• WebStorm
• Vim
• Emacs
• Eclipse
• Visual Studio 2015
• Visual Studio 2013