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

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

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

看了一下差不多的相关文档，随手放一篇比较精简觉得写的也比较清晰的：https://www.jianshu.com/p/a4d9754281eb

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

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

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

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

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

很明显的可以看到，其实这个时候读取的是js文件内的test事件。

这个时候我们再来点击手动编译，看一下结果。

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

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

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

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

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

于此同时，我去找了一下官方文档的相关内容：

https://developers.weixin.qq.com/miniprogram/dev/devtools/edit.html#TypeScript-%E6%94%AF%E6%8C%81

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

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

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

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

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