使用Typescript开发微信小程序的步骤详解


Posted in Javascript onJanuary 12, 2021

Typescript的优势咱不需要赘述太多,有兴趣可以参考(https://www.typescriptlang.org/)。今天给大家分享一下如何在微信小程序(或者其他同类小程序)开发中使用Typescript。

这个分两种情况,最简单的做法就是在创建项目时,选择Typescript这个选项,如下图所示。但要注意,这个选项只有在选择"Use no cloud service"才有,而另外一种Mini Program Cloud Base则不支持。这个可能是开发工具还没有跟上吧,希望以后默认也能选择。

使用Typescript开发微信小程序的步骤详解

那么问题就来了,如果我选择了第一种Mini Program Cloud Base,亦或是我之前有一个项目,现在也想用Typescript,怎么办呢?其实也不难,请参考下面我总结的步骤。

第一步:确保你的项目有一个package.json文件,并且确保增加如下两行,其他的可以不一样。如果该文件不存在,请用npm init命令生成。该文件修改完后,请运行npm install命令生成本地的依赖。

使用Typescript开发微信小程序的步骤详解

第二步,为你的项目增加一个tsconfig.json文件,内容如下

{

"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": [

"es5"

],

"typeRoots": [

"./typings"

]

},

"include": [

"./**/*.ts"

],

"exclude": [

"node_modules"

]

}

第三步,下载下面这个压缩包,解压缩,放在项目的根目录下

这里的文件是腾讯官方提供的类型定义文件d.ts

使用Typescript开发微信小程序的步骤详解

第四步,修改project.config.json 文件,添加预处理命令

"scripts": {

"beforeCompile": "npm run tsc",

"beforePreview": "npm run tsc",

"beforeUpload": "npm run tsc"

},

使用Typescript开发微信小程序的步骤详解

第五步,确保在"微信开发者工具"中启用了预处理命令。

使用Typescript开发微信小程序的步骤详解

搞定,这样就可以愉快地使用Typescript进行微信小程序的开发了,而且我还更加推荐用VS Code直接进行开发,"微信开发者工具"仅用来做编译和发布,这个开发体验真的很流畅,如丝般顺滑。下一篇有时间我再分享这个内容吧。

到此这篇关于使用Typescript开发微信小程序的步骤详解的文章就介绍到这了,更多相关Typescript开发微信小程序内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 #Vue.js
vue 页面跳转的实现方式
Jan 12 #Vue.js
使用js原生实现年份轮播选择效果实例
Jan 12 #Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 #Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 #Vue.js
js动态生成表格(节点操作)
Jan 12 #Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 #Vue.js
You might like
php UBB 解析实现代码
2011/11/27 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
php实现的mongodb操作类
2015/05/28 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
javascript 函数式编程
2007/08/16 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
Python处理文本文件中控制字符的方法
2017/02/07 Python
python回调函数中使用多线程的方法
2017/12/25 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
python计算n的阶乘的方法代码
2019/10/25 Python
详解python itertools功能
2020/02/07 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
《充气雨衣》教学反思
2014/04/07 职场文书
投资建议书模板
2014/05/12 职场文书
三问三解心得体会
2014/09/05 职场文书
担保书格式范文
2015/09/22 职场文书
六年级数学教学反思
2016/02/16 职场文书
Python基础知识之变量的详解
2021/04/14 Python
使用numpy nonzero 找出非0元素
2021/05/14 Python
详解Python类和对象内容
2021/06/22 Python