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文件,內容如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
{ "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" ] } |
第三步,下載下面這個壓縮包,解壓縮,放在項目的根目錄下
這里的文件是騰訊官方提供的類型定義文件d.ts
第四步,修改project.config.json 文件,添加預處理命令
1
2
3
4
5
6
7
8
9
|
"scripts" : { "beforeCompile" : "npm run tsc" , "beforePreview" : "npm run tsc" , "beforeUpload" : "npm run tsc" }, |
第五步,確保在"微信開發者工具"中啟用了預處理命令。
搞定,這樣就可以愉快地使用Typescript進行微信小程序的開發了,而且我還更加推薦用VS Code直接進行開發,"微信開發者工具"僅用來做編譯和發布,這個開發體驗真的很流暢,如絲般順滑。下一篇有時間我再分享這個內容吧。
到此這篇關于使用Typescript開發微信小程序的步驟詳解的文章就介紹到這了,更多相關Typescript開發微信小程序內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家!
原文鏈接:https://www.cnblogs.com/chenxizhang/archive/2021/01/12/14265729.html