終于(yú)，終于(yú)要(yào / yāo)進入微信小程序的(de)坑了(le／liǎo)嗎？！（之(zhī)前簡單摸了(le／liǎo)一摸，但是(shì)最後因爲(wéi / wèi)沒有實際業務場景最後随手寫了(le／liǎo)點很水的(de)小東西，沒怎麽具體接觸）

這(zhè)一次起步呢，就(jiù)決定直接開始從集成ts的(de)方向上(shàng)入手～

首先！按照老夫一貫的(de)日常風格，當然是(shì)先去找一堆相關文檔看看山有多高，水有多深哈哈～

看了(le／liǎo)一下差不(bù)多的(de)相關文檔，随手放一篇比較精簡覺得寫的(de)也(yě)比較清晰的(de)：https://www.jianshu.com/p/a4d9754281eb

于(yú)是(shì)呢，我按照文章的(de)部分創建了(le／liǎo)一個(gè)ts的(de)小程序項目～

初始化的(de)目錄結構部分就(jiù)是(shì)這(zhè)個(gè)樣子(zǐ)的(de)，可以(yǐ)清晰的(de)看到(dào)和(hé / huò)一般的(de)小程序項目不(bù)同的(de)是(shì)，ts項目默認是(shì)使用了(le／liǎo)npm模塊，miniprogram文件夾内就(jiù)是(shì)我們小程序的(de)主體内容部分和(hé / huò)相關配置文件，每個(gè)ts文件都有一個(gè)配套的(de)js文件。

值得注意的(de)是(shì)，很多博客會說(shuō)明集成ts的(de)項目需要(yào / yāo)手動編譯才會生效，但是(shì)沒有說(shuō)明原因，這(zhè)一點讓我覺得很奇怪，因爲(wéi / wèi)我記得微信開發者工具是(shì)可以(yǐ)配置保存時(shí)自動編譯的(de)，什麽情況下會需要(yào / yāo)手動編譯？？

答案在(zài)于(yú)，小程序實際取用的(de)是(shì).js文件，而(ér)非.ts文件，手動編譯觸發了(le／liǎo).ts文件 => .js文件，微信小程序并沒有通俗意義上(shàng)的(de)支持ts，隻是(shì)爲(wéi / wèi)了(le／liǎo)衆多的(de)ts愛好者加了(le／liǎo)一層轉換，而(ér)這(zhè)層轉換在(zài)保存時(shí)觸發自動編譯的(de)時(shí)候并沒有執行。

我分别在(zài).js文件和(hé / huò).ts文件都寫了(le／liǎo)一個(gè)test方法，輸出(chū)内容爲(wéi / wèi)：js/ts文件test事件觸發，此時(shí)不(bù)點擊工具的(de)手動編譯，而(ér)是(shì)選擇觸發保存時(shí)候的(de)自動化編譯。

很明顯的(de)可以(yǐ)看到(dào)，其實這(zhè)個(gè)時(shí)候讀取的(de)是(shì)js文件内的(de)test事件。

這(zhè)個(gè)時(shí)候我們再來(lái)點擊手動編譯，看一下結果。

通過上(shàng)圖所示或者下圖所示方式進行手動編譯

編譯結束之(zhī)後，我們再來(lái)看對應的(de).js文件，會發現内容被修改了(le／liǎo)，變得與ts文件内一緻。

由此，明白了(le／liǎo)爲(wéi / wèi)什麽各位大(dà)佬要(yào / yāo)說(shuō)明需要(yào / yāo)進行手動編譯。以(yǐ)上(shàng)～

我在(zài)這(zhè)裏插了(le／liǎo)一行代碼輸出(chū)，發現手動編譯的(de)時(shí)候會觸發tsc命令～而(ér)保存自動編譯的(de)時(shí)候不(bù)會觸發到(dào)這(zhè)一條命令～emmmmmmmmmm這(zhè)個(gè)可能是(shì)産品設計上(shàng)的(de)點～

與此同時(shí)，明白了(le／liǎo)小程序的(de)這(zhè)一套邏輯之(zhī)後就(jiù)明白了(le／liǎo)爲(wéi / wèi)什麽頁面目錄下既有.ts文件也(yě)有.js文件了(le／liǎo)。

于(yú)此同時(shí)，我去找了(le／liǎo)一下官方文檔的(de)相關内容：

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

這(zhè)裏有提到(dào)配置編譯前的(de)預置命令，于(yú)是(shì)點開之(zhī)後看到(dào)了(le／liǎo)如下内容：

這(zhè)個(gè)是(shì)官方給出(chū)的(de)示例内容，但是(shì)很微妙的(de)是(shì)？我打開我的(de)本地(dì / de)配置，emmmmmmmmmm好像在(zài)生成typescript小程序模版的(de)時(shí)候就(jiù)默認給配置了(le／liǎo)這(zhè)個(gè)，但是(shì)保存的(de)時(shí)候并沒有執行～也(yě)就(jiù)是(shì)說(shuō)，保存自動編譯的(de)時(shí)候并沒有執行這(zhè)個(gè)。。

阿！找到(dào)了(le／liǎo)官方解釋！實錘！和(hé / huò)自己的(de)猜測一模一樣！

像我這(zhè)樣的(de)人(rén)可能就(jiù)會動态炸毛，因爲(wéi / wèi)js文件和(hé / huò)ts文件同源，在(zài)寫代碼的(de)時(shí)候萬一是(shì)改動的(de)js文件，觸發一個(gè)手動編譯給搞沒了(le／liǎo)就(jiù)很尴尬，特别是(shì)改動較多較大(dà)，通過ctrl + z已經無力回天的(de)時(shí)候，簡直就(jiù)是(shì)病喪中的(de)病喪！！！

ps：好了(le／liǎo)，本來(lái)想自己折騰一下在(zài)自動保存鈎子(zǐ)觸發執行tsc，發現組裏大(dà)佬已經搞了(le／liǎo)一整套，後期可能會開源出(chū)來(lái)，所以(yǐ)這(zhè)裏就(jiù)先告一段落。後期有機會會在(zài)這(zhè)個(gè)地(dì / de)方放一下大(dà)佬的(de)開源内容。