likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 35

数组场景五

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

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

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

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

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

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

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

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

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

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

数组场景五

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

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

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

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

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

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

三.函数的格式书写

函数场景.一

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

接着我们调试一下,在下面其实我们就可以看出来,的意思就是 b:number | undefined 和之前的逻辑或的意思差不多。

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

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