用大白话让你理解TypeScript的要点.(二)

简介: 用大白话让你理解TypeScript的要点.(二)

数组场景五


我数字里面各种个样的东西都有,我该咋办?老规矩,先把你的数据按照Js写。(联合类型)

image.png

来分析到底有什么数据,往arr的冒号前面加就行了

image.png

还没等你打完代码,vscode已经开始提醒你该怎么写了。就是用 |这个运算符,其实这个意思和js的逻辑或||运算符的道理是一样一样的.并且类型一定要在()内书写。

image.png

抄都不会抄那么我也没办法了

image.png

别忘了这是个数组数据,最后加上【】

image.png

数组场景五


如果我不加小括号代表的含义是什么呢?

image.png

我这样书写一下你就会明白。

image.png

image.png

去掉括号,相当于每个类型都是来约束 arr变量的,它规定arry要么是string类型的数组,要么是number类型的数组。相当于每个被 |隔开的都是一个单独的个体。

三.函数的格式书写


函数场景.一


image.png

这里其实有些不同的地方,不过没关系,你还是按照你js代码的机制去写,变量类型全部先给any

image.png

这时候虽然你的代码是期望实现两个数字之和,但是别人看你的代码,有可能是理解为两个字符串相加。如下图,是不会有错误的。

image.png

所以这里我们就需要明确告诉其他人,也是为了未来以后自己review自己的代码不至于好像在看一堆狗屎。

image.png

对了,别忘了约束一下返回值的条件。给函数的()后面加规定返回值类型即可。

image.png

函数场景二.箭头函数(已确定参数为number,返回值也为number)


image.png

我们怎么设置参数呢?其实道理是一样的。

image.png

image.png

函数场景三.函数的返回值为空


如果你期望某个函数只是单纯的逻辑运算而不需要返回值,那么就可以设置void属性,void英文单词意思为空,在Ts里意思是返回undefined,即不应有返回值。

image.png

函数场景四.函数的可选参数


假设我并不知道第一个参数有没有值,这里TS里有规定,不允许可选参数出现在必选参数之前。

image.png

image.png

接着我们调试一下,在下面其实我们就可以看出来,的意思就是

b:number | undefined 和之前的逻辑或的意思差不多。

image.png

总结:Ts里给函数加类型,根本上就是给参数和返回值加类型。

相关文章
|
JavaScript 索引
用大白话让你理解TypeScript的要点.(三)
用大白话让你理解TypeScript的要点.(三)
用大白话让你理解TypeScript的要点.(三)
|
JavaScript Java C语言
用大白话让你理解TypeScript的要点.(一)
用大白话让你理解TypeScript的要点.(一)
用大白话让你理解TypeScript的要点.(一)
|
2月前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
39 1
typeScript进阶(9)_type类型别名
|
25天前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
41 0
|
25天前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
2月前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
38 1
|
2月前
|
存储 JavaScript
typeScript进阶(11)_元组类型
本文介绍了TypeScript中的元组(Tuple)类型,它是一种特殊的数组类型,可以存储不同类型的元素。文章通过示例展示了如何声明元组类型以及如何给元组赋值。元组类型在定义时需要指定数组中每一项的类型,且在赋值时必须满足这些类型约束。此外,还探讨了如何给元组类型添加额外的元素,这些元素必须符合元组类型中定义的类型联合。
44 0
|
2月前
|
JavaScript
typeScript进阶(10)_字符串字面量类型
本文介绍了TypeScript中的字符串字面量类型,这种类型用来限制变量只能是某些特定的字符串字面量。通过使用`type`关键字声明,可以确保变量的值限定在预定义的字符串字面量集合中。文章通过示例代码展示了如何声明和使用字符串字面量类型,并说明了它在函数默认参数中的应用。
36 0
|
9天前
|
JavaScript 开发者
在 Babel 插件中使用 TypeScript 类型
【10月更文挑战第23天】可以在 Babel 插件中更有效地使用 TypeScript 类型,提高插件的开发效率和质量,减少潜在的类型错误。同时,也有助于提升代码的可理解性和可维护性,使插件的功能更易于扩展和升级。
|
20天前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!