1. 程式人生 > 程式設計 >使用Typescript開發微信小程式的步驟詳解

使用Typescript開發微信小程式的步驟詳解

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"

]

}

第三步,下載下面這個壓縮包,解壓縮,放在專案的根目錄下

http://xiazai.jb51.net/202101/yuanma/typings_jb51.rar

這裡的檔案是騰訊官方提供的型別定義檔案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開發微信小程式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!