科技微讯

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

微信小程序 Typescript 项目模版

typings 文件夹

使用微信小程序开发者工具创建的 Typescript 模版项目有一个 typings 文件夹,里面放着微信小程序的类型声明文件,同时 .tsconfig.jsoncompilerOptions.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,工具会自动处理好小程序相关的声明文件。

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

那,如果我希望通过 npm 包安装声明文件需要怎么做呢?

首先要删除 typings 文件夹,并删除 .tsconfig.json 的 compilerOptions.typeRoots 字段,接着参考 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 的方法


相关笔记:

暂无评论