現(xiàn)在有越來(lái)越多的項(xiàng)目開始使用 ts，我們熟知的 React 、Ant Design 也已經(jīng)全面轉(zhuǎn)變?yōu)?ts。那么 ts 能給我們帶來(lái)什么呢？

很多人會(huì)好奇，ESLint 可以為我們提示代碼不規(guī)范以及使用錯(cuò)誤等問題，在有 ESLint 的情況下為什么還需要 TypeScript？

首先，ESLint 是用來(lái)檢測(cè)代碼規(guī)范的，并不能檢測(cè)代碼邏輯問題。

其次，我們都知道 JavaScript 是一種弱類型語(yǔ)言，并且是在運(yùn)行時(shí)檢查的動(dòng)態(tài)類型。而 Typescript 相對(duì)于 Javascript 為我們帶來(lái)了靜態(tài)類型，它可以根據(jù)我們對(duì)變量的類型定義、以及自身的類型斷言在編譯期對(duì)代碼進(jìn)行類型檢查。

簡(jiǎn)單介紹過后，下面我們開始進(jìn)入正題，給 Taro 項(xiàng)目加上 TS。

首先是關(guān)于 npm 包的安裝，這里我建議通過 taro init 選擇 Typescript，創(chuàng)建內(nèi)置 ts 環(huán)境的新項(xiàng)目。

下面是 ts 相關(guān)包：

"@typescript-eslint/eslint-plugin": "^2.x",
// esLint插件，為TypeScript代碼庫(kù)提供lint規(guī)則
"@typescript-eslint/parser": "^2.x",
// 允許ESLint，對(duì)TypeScript代碼進(jìn)行整理
"typescript": "^3.7.0",
// 我們的主角 typescript
"@types/react": "^17.0.0",
// React的類型定義
"@types/react-dom": "^17.0.0",
// React-dom 的類型定義
"@types/webpack-env": "^1.13.6",
// webpack（模塊API）的類型定義
"@types/wechat-miniprogram": "^3.1.0",
// 微信小程序的類型定義
復(fù)制代碼

@types/** 此類包，是為了讓我們能在 ts 中使用第三方庫(kù)的 API。

Typescript 和 ESLint 一樣，都需要配置文件作為編譯配置。tsconfig.json 就是用來(lái)配置編譯 Typescript 的特定選項(xiàng)。

• files : 需要編譯的單個(gè)文件列表，可以用相對(duì)路徑和絕對(duì)路徑來(lái)表示。

  "files": [
      // 指定編譯文件是src目錄下的index.ts文件
      "scr/index.ts"
  ]
  復(fù)制代碼

• include : 需要編譯的文件或目錄。

  "include": [
       // 編譯src目錄下的所有文件，包括子目錄
      "scr",
      // 只編譯scr一級(jí)目錄下的文件
      "scr/*",
      // 只編譯scr二級(jí)目錄下的文件
      "scr/*/*"
  ]
  復(fù)制代碼

• exclude : 不需要編譯的文件或目錄，默認(rèn)排除 node_modules 文件。

    "exclude": ["dist", "src/assets"],
  復(fù)制代碼

• extends : 從另一個(gè)配置文件里繼承 ts 配置，所繼承配置文件的 files，include 和 exclude 覆蓋源配置文件的屬性。

    "extends": "./configs/base",
  復(fù)制代碼

• compileOnSave : 可以讓 IDE 在保存文件的時(shí)候根據(jù) tsconfig.json 重新生成文件。

    "compileOnSave": true,
  復(fù)制代碼

• compilerOptions : 編譯器選項(xiàng)類型有很多，下面只列出常用配置，在這里查看完整的編譯選項(xiàng)器選項(xiàng)列表。

    "compilerOptions": {
        "incremental": true, // TS編譯器在第一次編譯之后會(huì)生成一個(gè)存儲(chǔ)編譯信息的文件，第二次編譯會(huì)在第一次的基礎(chǔ)上進(jìn)行增量編譯，可以提高編譯的速度
        "tsBuildInfoFile": "./buildFile", // 增量編譯文件的存儲(chǔ)位置
        "diagnostics": true, // 打印診斷信息
        "target": "ES2017", // 目標(biāo)語(yǔ)言的版本
        "module": "CommonJS", // 生成代碼的模板標(biāo)準(zhǔn)
        "outFile": "./app.js", // 將多個(gè)相互依賴的文件生成一個(gè)文件，可以用在AMD模塊中，即開啟時(shí)應(yīng)設(shè)置"module": "AMD",
        "lib": ["DOM", "ES2015", "ScriptHost", "ES2019.Array"], // TS需要引用的庫(kù)，即聲明文件，es5 默認(rèn)引用dom、es5、scripthost,如需要使用es的高級(jí)版本特性，通常都需要配置，如es8的數(shù)組新特性需要引入"ES2019.Array",
        "allowJS": true, // 允許編譯器編譯JS，JSX文件
        "checkJs": true, // 允許在JS文件中報(bào)錯(cuò)，通常與allowJS一起使用
        "outDir": "./dist", // 指定輸出目錄
        "rootDir": "./", // 指定輸出文件目錄(用于輸出)，用于控制輸出目錄結(jié)構(gòu)
        "declaration": true, // 生成聲明文件，開啟后會(huì)自動(dòng)生成聲明文件
        "declarationDir": "./file", // 指定生成聲明文件存放目錄
        "emitDeclarationOnly": true, // 只生成聲明文件，而不會(huì)生成js文件
        "sourceMap": true, // 生成目標(biāo)文件的sourceMap文件
        "inlineSourceMap": true, // 生成目標(biāo)文件的inline SourceMap，inline SourceMap會(huì)包含在生成的js文件中
        "declarationMap": true, // 為聲明文件生成sourceMap
        "typeRoots": [], // 聲明文件目錄，默認(rèn)時(shí)node_modules/@types
        "types": [], // 加載的聲明文件包
        "removeComments":true, // 刪除注釋
        "noEmit": true, // 不輸出文件,即編譯后不會(huì)生成任何js文件
        "noEmitOnError": true, // 發(fā)送錯(cuò)誤時(shí)不輸出任何文件
        "noEmitHelpers": true, // 不生成helper函數(shù)，減小體積，需要額外安裝，常配合importHelpers一起使用
        "importHelpers": true, // 通過tslib引入helper函數(shù)，文件必須是模塊
        "downlevelIteration": true, // 降級(jí)遍歷器實(shí)現(xiàn)，如果目標(biāo)源是es3/5，那么遍歷器會(huì)有降級(jí)的實(shí)現(xiàn)
        "strict": true, // 開啟所有嚴(yán)格的類型檢查
        "alwaysStrict": true, // 在代碼中注入'use strict'
        "noImplicitAny": true, // 不允許隱式的any類型
        "strictNullChecks": true, // 不允許把null、undefined賦值給其他類型的變量
        "strictFunctionTypes": true, // 不允許函數(shù)參數(shù)雙向協(xié)變
        "strictPropertyInitialization": true, // 類的實(shí)例屬性必須初始化
        "strictBindCallApply": true, // 嚴(yán)格的bind/call/apply檢查
        "noImplicitThis": true, // 不允許this有隱式的any類型
        "noUnusedLocals": true, // 檢查只聲明、未使用的局部變量(只提示不報(bào)錯(cuò))
        "noUnusedParameters": true, // 檢查未使用的函數(shù)參數(shù)(只提示不報(bào)錯(cuò))
        "noFallthroughCasesInSwitch": true, // 防止switch語(yǔ)句貫穿(即如果沒有break語(yǔ)句后面不會(huì)執(zhí)行)
        "noImplicitReturns": true, //每個(gè)分支都會(huì)有返回值
        "esModuleInterop": true, // 允許export=導(dǎo)出，由import from 導(dǎo)入
        "allowUmdGlobalAccess": true, // 允許在模塊中全局變量的方式訪問umd模塊
        "moduleResolution": "node", // 模塊解析策略，ts默認(rèn)用node的解析策略，即相對(duì)的方式導(dǎo)入
        "baseUrl": "./", // 解析非相對(duì)模塊的基地址，默認(rèn)是當(dāng)前目錄
        "paths": { // 路徑映射，相對(duì)于baseUrl
            "@components/*": ["./src/components/*"],
            "@util": ["./src/util/*"],
            "@assets/*": ["./src/assets/*"],
        },
        "rootDirs": ["src","out"], // 將多個(gè)目錄放在一個(gè)虛擬目錄下，用于運(yùn)行時(shí)，即編譯后引入文件的位置可能發(fā)生變化，這也設(shè)置可以虛擬src和out在同一個(gè)目錄下，不用再去改變路徑也不會(huì)報(bào)錯(cuò)
        "listEmittedFiles": true, // 打印輸出文件
        "listFiles": true, // 打印編譯的文件(包括引用的聲明文件)
        "jsx": 'React', // 在 .tsx文件里支持JSX
    }
  復(fù)制代碼

wx 報(bào)錯(cuò)問題

解決方案有兩種

1. 安裝定義文件

   npm install @types/wechat-miniprogram
   復(fù)制代碼

2. 安裝獨(dú)立的 npm 包

   npm install miniprogram-api-typings
   復(fù)制代碼

   安裝后需要在使用的地方或者根目錄手動(dòng)導(dǎo)入： import 'miniprogram-api-typings';

   或者在 tsconfig.json 中添加一下配置：

   "compilerOptions": {
       "types": ["miniprogram-api-typings"]
   }
   復(fù)制代碼

promise 報(bào)錯(cuò)是由于 tsconfig.json 中的 js 目標(biāo)版本問題，將目標(biāo)版本改為 ES2016 及以上版本即可解決：

"compilerOptions": {
    "target": "ES2017",
}