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