如何給你的Taro小程序項目加上TS

前言

如今有愈來愈多的項目開始使用 ts，咱們熟知的 React 、Ant Design 也已經全面轉變爲 ts。那麼 ts 能給咱們帶來什麼呢？html

粗談 TypeScript

不少人會好奇，ESLint 能夠爲咱們提示代碼不規範以及使用錯誤等問題，在有 ESLint 的狀況下爲何還須要 TypeScript？node

首先，ESLint 是用來檢測代碼規範的，並不能檢測代碼邏輯問題。react

其次，咱們都知道 JavaScript 是一種弱類型語言，而且是在運行時檢查的動態類型。而 Typescript 相對於 Javascript 爲咱們帶來了靜態類型，它能夠根據咱們對變量的類型定義、以及自身的類型斷言在編譯期對代碼進行類型檢查。webpack

簡單介紹事後，下面咱們開始進入正題，給 Taro 項目加上 TS。git

TS 快到項目裏來

1. 新增包

首先是關於 npm 包的安裝，這裏我建議經過 taro init 選擇 Typescript，建立內置 ts 環境的新項目。github

下面是 ts 相關包：web

"@typescript-eslint/eslint-plugin": "^2.x",
// esLint插件，爲TypeScript代碼庫提供lint規則
"@typescript-eslint/parser": "^2.x",
// 容許ESLint，對TypeScript代碼進行整理
"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",
// 微信小程序的類型定義
複製代碼

@types/** 此類包，是爲了讓咱們能在 ts 中使用第三方庫的 API，關於這方面的介紹能夠查看這篇文章：在 typescript 中使用第三方庫。typescript

2. tsconfig.json

Typescript 和 ESLint 同樣，都須要配置文件做爲編譯配置。tsconfig.json 就是用來配置編譯 Typescript 的特定選項。npm

files : 須要編譯的單個文件列表，能夠用相對路徑和絕對路徑來表示。json

"files": [
    // 指定編譯文件是src目錄下的index.ts文件
    "scr/index.ts"
]
複製代碼

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

"include": [
     // 編譯src目錄下的全部文件，包括子目錄
    "scr",
    // 只編譯scr一級目錄下的文件
    "scr/*",
    // 只編譯scr二級目錄下的文件
    "scr/*/*"
]
複製代碼

exclude : 不須要編譯的文件或目錄，默認排除 node_modules 文件。
```
"exclude": ["dist", "src/assets"],
複製代碼
```
extends : 從另外一個配置文件裏繼承 ts 配置，所繼承配置文件的 files，include 和 exclude 覆蓋源配置文件的屬性。
```
"extends": "./configs/base",
複製代碼
```
compileOnSave : 可讓 IDE 在保存文件的時候根據 tsconfig.json 從新生成文件。
```
"compileOnSave": true,
複製代碼
```

compilerOptions : 編譯器選項類型有不少，下面只列出經常使用配置，在這裏查看完整的編譯選項器選項列表。

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

常見報錯處理

wx 報錯問題

解決方案有兩種

安裝定義文件

npm install @types/wechat-miniprogram
複製代碼

安裝獨立的 npm 包
```
npm install miniprogram-api-typings
複製代碼
```
安裝後須要在使用的地方或者根目錄手動導入： import 'miniprogram-api-typings';

或者在 tsconfig.json 中添加一下配置：
```
"compilerOptions": {
    "types": ["miniprogram-api-typings"]
}
複製代碼
```

promise 報錯問題

promise 報錯是因爲 tsconfig.json 中的 js 目標版本問題，將目標版本改成 ES2016 及以上版本便可解決：

"compilerOptions": {
    "target": "ES2017",
}
複製代碼