使用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 相关文章推荐
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 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 magic_quotes_gpc的使用方法详解
2013/06/24 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
经典c++面试题四
2015/05/14 面试题
医药专业应届毕业生求职信范文
2014/01/01 职场文书
海洋科学专业求职信
2014/08/10 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python