TypeScript 安裝與使用

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

1. 慕課解釋

環(huán)境準(zhǔn)備：

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

到 nodejs官網(wǎng) 根據(jù)自己的操作系統(tǒng)下載對(duì)應(yīng) Node.js 版本，Node.js 自帶 npm。安裝后，在 終端 執(zhí)行如下命令，檢查是否安裝成功：

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

2. TypeScript 安裝

通過 npm 全局安裝 TypeScript：

npm install -g typescript

如果提示權(quán)限不足，請(qǐng)使用超管權(quán)限安裝

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

3. TypeScript 使用

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

文中所用 shell 命令在 Windows 環(huán)境可以安裝 git bash

創(chuàng)建一個(gè)練習(xí)目錄：

mkdir ts-practice && cd ts-practice

創(chuàng)建一個(gè) ts 文件：

touch enums.ts

文件中寫入內(nèi)容：

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

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

tsc enums.ts

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

3.2 工程化編譯方案

在進(jìn)行簡(jiǎn)單的語法練習(xí)時(shí)，可以通過上面介紹的 tsc 命令來編譯 ts 文件，而在實(shí)際項(xiàng)目工程中，可以采取另一種工程化方案：

① 在 ts-practice 目錄下創(chuàng)建 src 目錄：

mkdir src && touch src/index.ts

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

npm init

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

將 package.json 中入口文件選項(xiàng)改為剛剛創(chuàng)建的 index.ts：

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

③ 然后，使用 tsc 命令進(jìn)行初始化：

tsc --init

這時(shí)候你會(huì)發(fā)現(xiàn)目錄下又多了一個(gè) tsconfig.json 文件，它指定了用來編譯這個(gè)項(xiàng)目的根文件和編譯選項(xiàng)。

Tips：

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

后續(xù)會(huì)有專門一節(jié)來介紹 tsconfig.json 文件的各項(xiàng)參數(shù)，這里將剛才生成的配置文件稍作修改：

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

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

{
  "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"
  }
}

⑤ 根據(jù)配置文件 package.json 中的配置選項(xiàng)，下載所需模塊，也就是配置項(xiàng)目所需的運(yùn)行和開發(fā)環(huán)境：

npm install

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

⑥ 與介紹 tsc 命令時(shí)一樣，將以下內(nèi)容寫入 index.ts 文件：

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

⑦ 在項(xiàng)目根目錄輸入編譯命令：

npm run tsc

這時(shí)候可以看到多了一個(gè) lib 文件夾，里面的內(nèi)容就是項(xiàng)目的編譯結(jié)果了！ ???

4. 小結(jié)

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

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

其中第二種工程化方案是我們?cè)趯?shí)際開發(fā)中使用較多的，畢竟 TypeScript 就是為大型項(xiàng)目而生的。希望大家多加練習(xí)，熟練使用。