使用Typescript開發(fā)微信小程序的步驟詳解
Typescript的優(yōu)勢咱不需要贅述太多，有興趣可以參考（https://www.typescriptlang.org/）。今天給大家分享一下如何在微信小程序（或者其他同類小程序）開發(fā)中使用Typescript。
這個分兩種情況，最簡單的做法就是在創(chuàng)建項目時，選擇Typescript這個選項，如下圖所示。但要注意，這個選項只有在選擇"Use no cloud service"才有，而另外一種Mini Program Cloud Base則不支持。這個可能是開發(fā)工具還沒有跟上吧，希望以后默認(rèn)也能選擇。
那么問題就來了，如果我選擇了第一種Mini Program Cloud Base，亦或是我之前有一個項目，現(xiàn)在也想用Typescript，怎么辦呢？其實也不難，請參考下面我總結(jié)的步驟。
第一步：確保你的項目有一個package.json文件，并且確保增加如下兩行，其他的可以不一樣。如果該文件不存在，請用npm init命令生成。該文件修改完后，請運行npm install命令生成本地的依賴。
第二步，為你的項目增加一個tsconfig.json文件，內(nèi)容如下
{
"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"
]
}
第三步，下載下面這個壓縮包，解壓縮，放在項目的根目錄下
http://xiazai.jb51.net/202101/yuanma/typings_jb51.rar
這里的文件是騰訊官方提供的類型定義文件d.ts
第四步，修改project.config.json 文件，添加預(yù)處理命令
"scripts": {
"beforeCompile": "npm run tsc",
"beforePreview": "npm run tsc",
"beforeUpload": "npm run tsc"
},
第五步，確保在"微信開發(fā)者工具"中啟用了預(yù)處理命令。
搞定，這樣就可以愉快地使用Typescript進(jìn)行微信小程序的開發(fā)了，而且我還更加推薦用VS Code直接進(jìn)行開發(fā)，"微信開發(fā)者工具"僅用來做編譯和發(fā)布，這個開發(fā)體驗真的很流暢，如絲般順滑。下一篇有時間我再分享這個內(nèi)容吧。
到此這篇關(guān)于使用Typescript開發(fā)微信小程序的步驟詳解的文章就介紹到這了,更多相關(guān)Typescript開發(fā)微信小程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信小程序 點擊切換樣式scroll-view實現(xiàn)代碼實例
這篇文章主要介紹了微信小程序 點擊切換樣式scroll-view實現(xiàn)代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
本文給大家介紹的是司徒正美的javascript框架設(shè)計的第二章種子模塊的相關(guān)內(nèi)容，算是一個小小的讀后感，小伙伴們可以參考下。2015-06-06
這篇文章主要為大家詳細(xì)介紹了bootstrap側(cè)邊欄圓點導(dǎo)航效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
下面小編就為大家?guī)硪黄猨s獲取指定字符前/后的字符串簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
TypeScript同樣也可以結(jié)合構(gòu)建工具一起使用，下邊以webpack為例介紹一下如何結(jié)合構(gòu)建工具使用TypeScript，本文分步驟給大家介紹的非常詳細(xì)，需要的朋友參考下吧2021-06-06
學(xué)過JAVA的人對函數(shù)的覆蓋和重載肯定是再熟悉不過了。2009-09-09
使用javascript實現(xiàn)判斷當(dāng)前瀏覽器
這篇文章主要介紹了使用javascript實現(xiàn)判斷當(dāng)前瀏覽器的類型及版本，雖然不是很全面，但是還是推薦給大家，簡單學(xué)下方法和思路。2015-04-04
本篇文章主要介紹了詳解JS獲取HTML DOM元素的8種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
之前做過一個生成漸變字體的簡單演示今天閑著沒事就把這個功能完善了，把JS代碼封裝成一個類，載入頁面就可以使相應(yīng)的HTML元素內(nèi)部的字體產(chǎn)生漸變色。2008-11-11
這篇文章主要介紹了Bootstrap中data-target 到底是什么的相關(guān)資料，我目前理解到在bootstrap中data-target，data-toggle等屬性主要有兩種作用，具體哪兩種作用，大家通過本文詳細(xì)了解下2017-02-02