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.tsexport default interface IAppOption {
 globalData: {
      text: string;
 }
}
    // app.tsimport IAppOption From "./interface/IAppOption";
    AppIAppOption>
({
 globalData: {
  text: "Hello,Word!" }
, onLaunch() {
 }
}
    )

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

使用 Promise 化的微信小程序api

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

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

PromisifySuccessResult 返回了Promise

getStorageInfoTOption extends GetStorageInfoOption>
    (option?: TOption): PromisifySuccessResultTOption, GetStorageInfoOption>
    type PromisifySuccessResultP, T extends AsyncMethodOptionLike>
 = P extends {
 success: any }
 ? void : P extends {
 fail: any }
 ? void : P extends {
 complete: any }
     ? void : PromiseParametersExcludeT['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

到此这篇关于typescript编写微信小程序创建项目的方法的文章就介绍到这了,更多相关typescript开发微信小程序内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• 前端深入理解Typescript泛型概念
• 详解JavaScript私有类字段和TypeScript私有修饰符
• JS装饰者模式和TypeScript装饰器
• 详解TypeScript中的类型保护
• TypeScript在React项目中的使用实践总结
• Vue3+TypeScript封装axios并进行请求调用的实现
• TypeScript 安装使用及基本数据类型
• 详解Typescript里的This的使用方法
• TypeScript泛型参数默认类型和新的strict编译选项

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！