微信小程序开发者工具配置 Typescript 的方法

typings 文件夹

使用微信小程序开发者工具创建的 Typescript 模版项目有一个 typings 文件夹，里面放着微信小程序的类型声明文件，同时 .tsconfig.json 的 compilerOptions.typeRoots 字段被设置为 ./typings，即一律从 ./typings 读取类型声明。

下方是小程序 ts 模版创建的 .tsconfig.json 文件中的内容，各配置项目的意义和作用可参考 Typescript 的官方文档。

{
  "compilerOptions": {
    "strictNullChecks": true,
    "noImplicitAny": true,
    "module": "CommonJS",
    "target": "ES2020",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "alwaysStrict": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strict": true,
    "strictPropertyInitialization": true,
    "lib": ["ES2020"],
    "typeRoots": ["./typings"]
  },
  "include": ["./**/*.ts"],
  "exclude": ["node_modules"]
}

ts 默认从 node_modules/@types 读取类型声明文件，当设置了 typeRoots 后就只有 typeRoots 指向的类型声明会被读取（即 ./typings 文件夹下的类型），其他会被忽略。

./typings 目录下的小程序类型声明可以手动更新。

令人困惑的是，用微信开发者工具创建的 Typescript 模版自动创建了一个 package.json 文件，里面有一个名为 miniprogram-api-typings 的 devDependencies，微信官方工作人员建议：

如果你是从工具的 ts 相关模板创建的项目，可以不用执行 npm install，工具会自动处理好小程序相关的声明文件。

换言之，如果你用 ./typings，就不需要用 miniprogram-api-typings，可以把 miniprogram-api-typings 从 package.json 删除。

{
  "name": "miniprogram-ts-less-quickstart",
  "version": "1.0.0",
  "description": "",
  "scripts": {},
  "keywords": [],
  "author": "",
  "license": "",
  "dependencies": {},
  "devDependencies": {
    "miniprogram-api-typings": "^2.8.3-1"
  }
}

miniprogram-api-typings

如果你不想用 ./typings，而是选择 miniprogram-api-typings，又应该怎么做呢？

首先要删除 typings 文件夹，并删除 .tsconfig.json 的 compilerOptions.typeRoots 字段，接着参考 miniprogram-api-typings 使用文档，有两种使用方法：

npm install @types/wechat-miniprogram@latest；
npm install miniprogram-api-typings@latest，然后在 compilerOptions.types 设置 ["miniprogram-api-typings"]

miniprogram-api-typings 在 npm 的版本号比 @types/wechat-miniprogram 更高，最近更新日期也更接近现在，所以用第二种方法应该更好一些。

使用微信开发者工具创建的 ts 模版在 app.ts 等处使用了一个叫 <IAppOption> 的类型，改用 npm 安装类型声明而不是使用 ./typings 下的声明后 <IAppOption> 会提示不存在，可把它删除。

使用微信开发者工具创建的 ts 模版有一个 ESLint 配置文件 .eslintrc.js，但里面并没有针对 Typescript 相关的规则，关于如何在 Typescript 项目下配置 ESLint，请参考微信小程序开发者工具配置 ESLint 的方法。