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


Posted in Javascript onJanuary 29, 2021

创建项目

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

改造项目

编辑 package.json 文件,修改 miniprogram-api-typingstypescript 版本

{
 "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

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

Javascript 相关文章推荐
jQuery 处理表单元素的代码
Feb 15 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
js实现碰撞检测
Jan 29 #Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 #jQuery
vue穿梭框实现上下移动
Jan 29 #Vue.js
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 #Javascript
vue使用transition组件动画效果的实例代码
Jan 28 #Vue.js
Bootstrap FileInput实现图片上传功能
Jan 28 #Javascript
js实现简单的倒计时
Jan 28 #Javascript
You might like
关于页面优化和伪静态
2009/10/11 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
javascript add event remove event
2008/04/07 Javascript
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
python的keyword模块用法实例分析
2015/06/30 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
html5启动原生APP总结
2020/07/03 HTML / CSS
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
校园安全教育广播稿
2014/02/17 职场文书
读书活动总结
2014/04/28 职场文书
爱的教育读书笔记
2015/06/26 职场文书