使用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验证表单第二部分
Nov 25 Javascript
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
JavaScript 是什么意思
Sep 22 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
javascript canvas API内容整理
Feb 16 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
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 信息采集程序代码
2009/03/17 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
微信API接口大全
2015/04/15 PHP
php eval函数一句话木马代码
2015/05/21 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
Python使用folium excel绘制point
2019/01/03 Python
python提取log文件内容并画出图表
2019/07/08 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
python 如何上传包到pypi
2020/12/24 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
NET程序员上机面试题
2015/05/23 面试题
退休教师欢送会主持词
2014/03/31 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
nginx优化的六点方法
2021/03/31 Servers