使用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 相关文章推荐
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
使用node.JS中的url模块解析URL信息
Feb 06 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 array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
PHP速成大法
2015/01/30 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
php 实现进制相互转换
2016/04/07 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
javascript一点特殊用法
2008/05/28 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
JS不完全国际化&本地化手册 之 理论篇
2016/09/27 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
python实现石头剪刀布程序
2021/01/20 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
香港通票:Hong Kong Pass
2019/02/26 全球购物
企业行政文员岗位职责
2013/12/03 职场文书
木工主管岗位职责
2013/12/08 职场文书
承办会议欢迎词
2014/01/17 职场文书
语文教学感言
2014/02/06 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
人力资源职位说明书
2014/07/29 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
教师节主题班会教案
2015/08/17 职场文书
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js