typescript编写微信小程序创建项目的方法

创建项目

在微信开发者工具创建项目,在语言中选择 TypeScript

改造项目

编辑 package.json 文件,修改 miniprogram-api-typings 和 typescript 版本

{
 \"name\": \"miniprogram-ts-quickstart\",
 \"version\": \"1.0.0\",
 \"description\": \"\",
 \"scripts\": {
 \"compile\": \"./node_modules/typescript/bin/tsc\",
 \"tsc\": \"node ./node_modules/typescript/lib/tsc.js\"
 },
 \"keywords\": [],
 \"author\": \"\",
 \"license\": \"\",
 \"dependencies\": {
 },
 \"devDependencies\": {
 \"typescript\": \"^4.1.3\",
 \"miniprogram-api-typings\": \"^2.12.1-beta.0\"
 }
}

编辑 tsconfig.json 文件, 修改 lib 为 [\”esnext\”],支持最新语法, 删除 typeRoots 配置项

{
 \"compilerOptions\": {
 \"strictNullChecks\": true,
 \"noImplicitAny\": true,
 \"module\": \"CommonJS\",
 \"target\": \"ES5\",
 \"allowJs\": false,
 \"experimentalDecorators\": true,
 \"noImplicitThis\": true,
 \"noImplicitReturns\": true,
 \"alwaysStrict\": true,
 \"inlineSourceMap\": true,
 \"inlineSources\": true,
 \"noFallthroughCasesInSwitch\": true,
 \"noUnusedLocals\": true,
 \"noUnusedParameters\": true,
 \"strict\": true,
 \"removeComments\": true,
 \"pretty\": true,
 \"strictPropertyInitialization\": true,
 \"lib\": [\"esnext\"]
 },
 \"include\": [
 \"./**/*.ts\"
 ],
 \"exclude\": [
 \"node_modules\"
 ]
}

执行 npm install

删除项目下 typings 目录, 的 复制 node_modules 下 miniprogram-api-typings 的 types 文件到项目根目录

在 miniprogram 下创建 interface 目录并创建 IAppOption.ts 文件,最后编辑 app.ts 文件,

// IAppOption.ts
export default interface IAppOption {
 globalData: {
  text: string;
 }
}
// app.ts
import IAppOption from \"./interface/IAppOption\";

App<IAppOption>({
 globalData: {
  text: \"Hello,Word!\"
 },
 onLaunch() {
 }
})

在 详细 -> 本地设置 -> 调试基础库,直接选择最新的

使用 Promise 化的微信小程序api

以前可以通过 miniprogram-api-promise 这个包来完成 api Promise 化,或者自己写

现在可以直接使用,比如 wx.getStorageInfo ,在 lib.wx.api.d.ts 中返回了 PromisifySuccessResult

PromisifySuccessResult 返回了Promise

getStorageInfo<TOption extends GetStorageInfoOption>(
option?: TOption
): PromisifySuccessResult<TOption, GetStorageInfoOption>

type PromisifySuccessResult<
P,
 T extends AsyncMethodOptionLike
> = P extends { success: any }
 ? void
 : P extends { fail: any }
 ? void
 : P extends { complete: any }
 ? void
 : Promise<Parameters<Exclude<T[\'success\'], undefined>>[0]>

两种用法,大多数api都支持

 wx.getStorageInfo({
 success: () => {
  console.log(\'成功执行\')
 },
 fail: () => {
  console.log(\'失败执行\')
 },
 complete: () => {
  console.log(\'接口调用结束\')
 }
})
wx.getStorageInfo().then(() => {
 console.log(\'成功执行\')
}).catch(() => {
 console.log(\'失败执行\')
}).finally(() => {
 console.log(\'接口调用结束\')
})

源码: https://github.com/NikolasSky/ts-miniprogram/tree/master/ts-miniprogram-base