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