使用微信小程序开发者工具创建的 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"
}
}
如果你不想用 ./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 的方法。
相关笔记: