服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 使用Typescript开发微信小程序的步骤详解

使用Typescript开发微信小程序的步骤详解

2021-12-30 16:42陈希章 js教程

这篇文章主要介绍了使用Typescript开发微信小程序的步骤详解,本文分步骤通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

Typescript的优势咱不需要赘述太多,有兴趣可以参考(https://www.typescriptlang.org/)。今天给大家分享一下如何在微信小程序(或者其他同类小程序)开发中使用Typescript。

这个分两种情况,最简单的做法就是在创建项目时,选择Typescript这个选项,如下图所示。但要注意,这个选项只有在选择"Use no cloud service"才有,而另外一种Mini Program Cloud Base则不支持。这个可能是开发工具还没有跟上吧,希望以后默认也能选择。

使用Typescript开发微信小程序的步骤详解

那么问题就来了,如果我选择了第一种Mini Program Cloud Base,亦或是我之前有一个项目,现在也想用Typescript,怎么办呢?其实也不难,请参考下面我总结的步骤。

第一步:确保你的项目有一个package.json文件,并且确保增加如下两行,其他的可以不一样。如果该文件不存在,请用npm init命令生成。该文件修改完后,请运行npm install命令生成本地的依赖。

使用Typescript开发微信小程序的步骤详解

第二步,为你的项目增加一个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"
 
]
 
}

第三步,下载下面这个压缩包,解压缩,放在项目的根目录下

typings.rar

这里的文件是腾讯官方提供的类型定义文件d.ts

使用Typescript开发微信小程序的步骤详解

第四步,修改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开发微信小程序的步骤详解

第五步,确保在"微信开发者工具"中启用了预处理命令。

使用Typescript开发微信小程序的步骤详解

搞定,这样就可以愉快地使用Typescript进行微信小程序的开发了,而且我还更加推荐用VS Code直接进行开发,"微信开发者工具"仅用来做编译和发布,这个开发体验真的很流畅,如丝般顺滑。下一篇有时间我再分享这个内容吧。

到此这篇关于使用Typescript开发微信小程序的步骤详解的文章就介绍到这了,更多相关Typescript开发微信小程序内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://www.cnblogs.com/chenxizhang/archive/2021/01/12/14265729.html

延伸 · 阅读

精彩推荐
  • js教程原生JavaScript实现购物车

    原生JavaScript实现购物车

    这篇文章主要为大家详细介绍了原生JavaScript实现购物车,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    栋栋很优秀啊4092021-12-29
  • js教程基于JavaScript实现轮播图效果

    基于JavaScript实现轮播图效果

    这篇文章主要为大家详细介绍了基于JavaScript实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    努力学习中.....5482021-12-24
  • js教程详解JavaScript中分解数字的三种方法

    详解JavaScript中分解数字的三种方法

    这篇文章主要介绍了在JavaScript中分解数字的三种方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...

    Hunter网络安全6072021-12-27
  • js教程mapboxgl实现带箭头轨迹线的代码

    mapboxgl实现带箭头轨迹线的代码

    这篇文章主要介绍了mapboxgl实现带箭头轨迹线的代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...

    GIS兵器库9122021-12-27
  • js教程js动态生成表格(节点操作)

    js动态生成表格(节点操作)

    这篇文章主要为大家详细介绍了js动态生成表格,进行节点操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    刘刘刘code3342021-12-30
  • js教程js定时器出现第一次延迟的原因及解决方法

    js定时器出现第一次延迟的原因及解决方法

    在本篇文章里小编给大家整理的是一篇关于js定时器出现第一次延迟的原因及解决方法,对此有需要的朋友们可以学习下。...

    宋宋大人4912021-12-24
  • js教程微信小程序弹窗禁止页面滚动的实现代码

    微信小程序弹窗禁止页面滚动的实现代码

    这篇文章主要介绍了微信小程序弹窗禁止页面滚动的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需...

    任我行RQ5452021-12-23
  • js教程绘制微信小程序验证码功能的实例代码

    绘制微信小程序验证码功能的实例代码

    这篇文章主要介绍了绘制微信小程序验证码功能的实例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参...

    WALL*E8692021-12-27