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直接進行開發,"微信開發者工具"僅用來做編譯和發布,這個開發體驗真的很流暢,如絲般順滑。下一篇有時間我再分享這個內容吧。