终于,终于要进入微信小程序的坑了吗?!(之前简单摸了一摸,但是最后因为没有实际业务场景最后随手写了点很水的小东西,没怎么具体接触)

小程序typescript的怎么使用 typescript 微信小程序_自动编译


这一次起步呢,就决定直接开始从集成ts的方向上入手~

首先!按照老夫一贯的日常风格,当然是先去找一堆相关文档看看山有多高,水有多深哈哈~


于是呢,我按照文章的部分创建了一个ts的小程序项目~

小程序typescript的怎么使用 typescript 微信小程序_小程序_02


初始化的目录结构部分就是这个样子的,可以清晰的看到和一般的小程序项目不同的是,ts项目默认是使用了npm模块,miniprogram文件夹内就是我们小程序的主体内容部分和相关配置文件,每个ts文件都有一个配套的js文件。

值得注意的是,很多博客会说明集成ts的项目需要手动编译才会生效,但是没有说明原因,这一点让我觉得很奇怪,因为我记得微信开发者工具是可以配置保存时自动编译的,什么情况下会需要手动编译??

答案在于,小程序实际取用的是.js文件,而非.ts文件,手动编译触发了.ts文件 => .js文件,微信小程序并没有通俗意义上的支持ts,只是为了众多的ts爱好者加了一层转换,而这层转换在保存时触发自动编译的时候并没有执行

我分别在.js文件和.ts文件都写了一个test方法,输出内容为:js/ts文件test事件触发,此时不点击工具的手动编译,而是选择触发保存时候的自动化编译。

小程序typescript的怎么使用 typescript 微信小程序_自动编译_03


很明显的可以看到,其实这个时候读取的是js文件内的test事件。这个时候我们再来点击手动编译,看一下结果。

小程序typescript的怎么使用 typescript 微信小程序_微信小程序_04


通过上图所示或者下图所示方式进行手动编译

小程序typescript的怎么使用 typescript 微信小程序_配置文件_05


编译结束之后,我们再来看对应的.js文件,会发现内容被修改了,变得与ts文件内一致。

小程序typescript的怎么使用 typescript 微信小程序_微信小程序_06


由此,明白了为什么各位大佬要说明需要进行手动编译。以上~

小程序typescript的怎么使用 typescript 微信小程序_小程序_07


我在这里插了一行代码输出,发现手动编译的时候会触发tsc命令~而保存自动编译的时候不会触发到这一条命令~emmmmmmmmmm这个可能是产品设计上的点~

与此同时,明白了小程序的这一套逻辑之后就明白了为什么页面目录下既有.ts文件也有.js文件了。

小程序typescript的怎么使用 typescript 微信小程序_小程序_08

这里有提到配置编译前的预置命令,于是点开之后看到了如下内容:

小程序typescript的怎么使用 typescript 微信小程序_配置文件_09


这个是官方给出的示例内容,但是很微妙的是?我打开我的本地配置,emmmmmmmmmm好像在生成typescript小程序模版的时候就默认给配置了这个,但是保存的时候并没有执行~也就是说,保存自动编译的时候并没有执行这个。。

小程序typescript的怎么使用 typescript 微信小程序_配置文件_10


阿!找到了官方解释!实锤!和自己的猜测一模一样!

小程序typescript的怎么使用 typescript 微信小程序_自动编译_11

像我这样的人可能就会动态炸毛,因为js文件和ts文件同源,在写代码的时候万一是改动的js文件,触发一个手动编译给搞没了就很尴尬,特别是改动较多较大,通过ctrl + z已经无力回天的时候,简直就是病丧中的病丧!!!

ps:好了,本来想自己折腾一下在自动保存钩子触发执行tsc,发现组里大佬已经搞了一整套,后期可能会开源出来,所以这里就先告一段落。后期有机会会在这个地方放一下大佬的开源内容。