TypeScript 安裝與使用

本節介紹 TypeScript 的安裝與兩種使用方式，大家根據本節所介紹的流程一步步操作，相信很快就能編寫自己的 TypeScript 代碼。

1. 慕課解釋

環境準備：

• 安裝 Node.js 環境（version: 8.14.0+)
• 確保 npm 或者 yarn 可用

到 nodejs官網 根據自己的操作系統下載對應 Node.js 版本，Node.js 自帶 npm。安裝后，在 終端 執行如下命令，檢查是否安裝成功：

~ node -v
v10.16.3
~ npm -v
6.9.0

2. TypeScript 安裝

通過 npm 全局安裝 TypeScript：

npm install -g typescript

如果提示權限不足，請使用超管權限安裝

TypeScript 在全局安裝后，我們可以在任意位置使用 tsc 命令，tsc 命令負責編譯 TypeScript 文件為 JavaScript 文件。

3. TypeScript 使用

3.1 通過全局 tsc 命令編譯 TypeScript 代碼

文中所用 shell 命令在 Windows 環境可以安裝 git bash

創建一個練習目錄：

mkdir ts-practice && cd ts-practice

創建一個 ts 文件：

touch enums.ts

文件中寫入內容：

// enums.ts
export enum TokenType {
  ACCESS = 'accessToken',
  REFRESH = 'refreshToken'
}

然后通過 tsc 命令編譯 ts 文件：

tsc enums.ts

可以看到在同級目錄下，生成了一個 enums.js 文件。文中涉及的 TypeScript 語法之后會詳細介紹，這里清楚 ts 文件的編譯過程即可。

3.2 工程化編譯方案

在進行簡單的語法練習時，可以通過上面介紹的 tsc 命令來編譯 ts 文件，而在實際項目工程中，可以采取另一種工程化方案：

① 在 ts-practice 目錄下創建 src 目錄：

mkdir src && touch src/index.ts

② 接下來用 npm 進行項目初始化（初始化過程中的交互命令有興趣可自行查閱相關資料，目前一路按“回車鍵”即可）：

npm init

你會發現目錄中多了一個 package.json 文件，它定義了這個項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、作者、license等信息）。

將 package.json 中入口文件選項改為剛剛創建的 index.ts：

{
  "main": "src/index.ts",
}

③ 然后，使用 tsc 命令進行初始化：

tsc --init

這時候你會發現目錄下又多了一個 tsconfig.json 文件，它指定了用來編譯這個項目的根文件和編譯選項。

Tips：

• 不帶任何輸入文件的情況下調用 tsc 命令，編譯器會從當前目錄開始去查找 tsconfig.json 文件，逐級向上搜索父目錄。
• 當命令行上指定了輸入文件時，tsconfig.json 文件會被忽略。

后續會有專門一節來介紹 tsconfig.json 文件的各項參數，這里將剛才生成的配置文件稍作修改：

{
  "compilerOptions": {
    "target": "ESNext",     /* 支持 ES6 語法 */                      
    "module": "commonjs",                     
    "outDir": "./lib",
    "rootDir": "./src",
    "declaration": true,    /* 生成相應的.d.ts文件 */
    "strict": true, 
    "strictNullChecks": false,
    "noImplicitThis": true
  },
  "exclude": ["node_modules", "lib", "**/*.test.ts"],
  "include": ["src"]
}

④ 在 package.json 文件中，加入 script 命令以及依賴關系：

{
  "name": "ts-practice",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "tsc": "tsc"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^13.1.1",
    "typescript": "^3.7.4"
  }
}

⑤ 根據配置文件 package.json 中的配置選項，下載所需模塊，也就是配置項目所需的運行和開發環境：

npm install

你會看到多了一個 node_modules 文件夾和一個 package-lock.json 文件，node_modules 文件夾是項目的所有依賴包，package-lock.json 文件將項目依賴包的版本鎖定，避免依賴包大版本升級造成不兼容問題。

⑥ 與介紹 tsc 命令時一樣，將以下內容寫入 index.ts 文件：

// src/index.ts
export enum TokenType {
  ACCESS = 'accessToken',
  REFRESH = 'refreshToken'
}

⑦ 在項目根目錄輸入編譯命令：

npm run tsc

這時候可以看到多了一個 lib 文件夾，里面的內容就是項目的編譯結果了！ ???

4. 小結

本節主要介紹了 TypeScript 的安裝與兩種使用方式：

• 全局 tsc 命令直接編譯 ts 文件。
• 工程化方案，通過 script 腳本 運行編譯。

其中第二種工程化方案是我們在實際開發中使用較多的，畢竟 TypeScript 就是為大型項目而生的。希望大家多加練習，熟練使用。