前言
現(xiàn)在有越來越多的項(xiàng)目開始使用 ts叙淌，我們熟知的 React 愁铺、Ant Design 也已經(jīng)全面轉(zhuǎn)變?yōu)?ts茵乱。那么 ts 能給我們帶來什么呢？
粗談 TypeScript
很多人會(huì)好奇获黔，ESLint 可以為我們提示代碼不規(guī)范以及使用錯(cuò)誤等問題在验，在有 ESLint 的情況下為什么還需要 TypeScript腋舌？
首先渗蟹，ESLint 是用來檢測代碼規(guī)范的，并不能檢測代碼邏輯問題授艰。
其次淮腾，我們都知道 JavaScript 是一種弱類型語言屉佳，并且是在運(yùn)行時(shí)檢查的動(dòng)態(tài)類型。而 Typescript 相對(duì)于 Javascript 為我們帶來了靜態(tài)類型圆凰，它可以根據(jù)我們對(duì)變量的類型定義体箕、以及自身的類型斷言在編譯期對(duì)代碼進(jìn)行類型檢查。
簡單介紹過后站叼，下面我們開始進(jìn)入正題回怜，給 Taro 項(xiàng)目加上 TS玉雾。
TS 快到項(xiàng)目里來
1. 新增包
首先是關(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代碼庫提供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",
// 微信小程序的類型定義
@types/** 此類包竟坛，是為了讓我們能在 ts 中使用第三方庫的 API钧舌，關(guān)于這方面的介紹可以查看這篇文章：在 typescript 中使用第三方庫洼冻。
2. tsconfig.json
Typescript 和 ESLint 一樣，都需要配置文件作為編譯配置率碾。tsconfig.json 就是用來配置編譯 Typescript 的特定選項(xiàng)播掷。
-
files: 需要編譯的單個(gè)文件列表撼班，可以用相對(duì)路徑和絕對(duì)路徑來表示砰嘁。"files": [ // 指定編譯文件是src目錄下的index.ts文件 "scr/index.ts" ] -
include: 需要編譯的文件或目錄勘究。"include": [ // 編譯src目錄下的所有文件斟冕，包括子目錄 "scr", // 只編譯scr一級(jí)目錄下的文件 "scr/*", // 只編譯scr二級(jí)目錄下的文件 "scr/*/*" ] -
exclude: 不需要編譯的文件或目錄磕蛇，默認(rèn)排除node_modules文件秀撇。"exclude": ["dist", "src/assets"], -
extends: 從另一個(gè)配置文件里繼承 ts 配置，所繼承配置文件的 files棠绘，include 和 exclude 覆蓋源配置文件的屬性再扭。"extends": "./configs/base", -
compileOnSave: 可以讓 IDE 在保存文件的時(shí)候根據(jù) tsconfig.json 重新生成文件泛范。"compileOnSave": true, -
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)語言的版本 "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需要引用的庫，即聲明文件膀息，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語句貫穿(即如果沒有break語句后面不會(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 }
常見報(bào)錯(cuò)處理
wx 報(bào)錯(cuò)問題
解決方案有兩種
-
安裝定義文件
npm install @types/wechat-miniprogram -
安裝獨(dú)立的 npm 包
npm install miniprogram-api-typings安裝后需要在使用的地方或者根目錄手動(dòng)導(dǎo)入：
import 'miniprogram-api-typings';或者在 tsconfig.json 中添加一下配置：
"compilerOptions": { "types": ["miniprogram-api-typings"] }
promise 報(bào)錯(cuò)問題
promise 報(bào)錯(cuò)是由于 tsconfig.json 中的 js 目標(biāo)版本問題屿良，將目標(biāo)版本改為 ES2016 及以上版本即可解決：
"compilerOptions": {
"target": "ES2017",
}
