在微信小程序開發中使用Typescript


Typescript的優勢咱不需要贅述太多,有興趣可以參考(https://www.typescriptlang.org/)。今天給大家分享一下如何在微信小程序(或者其他同類小程序)開發中使用Typescript。

這個分兩種情況,最簡單的做法就是在創建項目時,選擇Typescript這個選項,如下圖所示。但要注意,這個選項只有在選擇"Use no cloud service"才有,而另外一種Mini Program Cloud Base則不支持。這個可能是開發工具還沒有跟上吧,希望以后默認也能選擇。

那么問題就來了,如果我選擇了第一種Mini Program Cloud Base,亦或是我之前有一個項目,現在也想用Typescript,怎么辦呢?其實也不難,請參考下面我總結的步驟。

第一步:確保你的項目有一個package.json文件,並且確保增加如下兩行,其他的可以不一樣。如果該文件不存在,請用npm init命令生成。該文件修改完后,請運行npm install命令生成本地的依賴。

第二步,為你的項目增加一個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"

]

}

 

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

https://files.cnblogs.com/files/chenxizhang/typings.zip

這里的文件是騰訊官方提供的類型定義文件d.ts

 

第四步,修改project.config.json 文件,添加預處理命令

"scripts": {

"beforeCompile": "npm run tsc",

"beforePreview": "npm run tsc",

"beforeUpload": "npm run tsc"

},

第五步,確保在"微信開發者工具"中啟用了預處理命令。

 

搞定,這樣就可以愉快地使用Typescript進行微信小程序的開發了,而且我還更加推薦用VS Code直接進行開發,"微信開發者工具"僅用來做編譯和發布,這個開發體驗真的很流暢,如絲般順滑。下一篇有時間我再分享這個內容吧。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM