typescript编写微信小程序-创建项目

创建项目

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

改造项目

1. 编辑 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"
  }
}

4. 编辑 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"
  ]
}

3. 执行 npm install

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

5. 在 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() {
    }
})

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

使用 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