快捷導(dǎo)航

使用Typescript開發(fā)微信小程序的步驟詳解

更新時(shí)間：2021年01月12日 15:08:46 作者：陳希章

這篇文章主要介紹了使用Typescript開發(fā)微信小程序的步驟詳解,本文分步驟通過圖文并茂的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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

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

那么問題就來了，如果我選擇了第一種Mini Program Cloud Base，亦或是我之前有一個(gè)項(xiàng)目，現(xiàn)在也想用Typescript，怎么辦呢？其實(shí)也不難，請參考下面我總結(jié)的步驟。

第一步：確保你的項(xiàng)目有一個(gè)package.json文件，并且確保增加如下兩行，其他的可以不一樣。如果該文件不存在，請用npm init命令生成。該文件修改完后，請運(yùn)行npm install命令生成本地的依賴。

第二步，為你的項(xiàng)目增加一個(gè)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"

]

}

第三步，下載下面這個(gè)壓縮包，解壓縮，放在項(xiàng)目的根目錄下

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ā)布，這個(gè)開發(fā)體驗(yàn)真的很流暢，如絲般順滑。下一篇有時(shí)間我再分享這個(gè)內(nèi)容吧。

到此這篇關(guān)于使用Typescript開發(fā)微信小程序的步驟詳解的文章就介紹到這了,更多相關(guān)Typescript開發(fā)微信小程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: