TypeScript和JavaScript的区别,全面解读超详细(二)

了解基础篇:点击跳转 TypeScript和JavaScript的区别,全面解读超详细

在这里插入图片描述

时光使我们渐行渐远,有人活着却没有理想,就宛如在地狱,有人活着却满怀理想,就宛如在天堂,没有理想的人如同行尸走肉,对生活而感到不精彩,无味,而我是一个对生命充满希望,永不放弃,为理想而拼搏的人


4.TS 高级类型

更新日期:2022年11月30日
更新时间:20点46分

4.1 元组

提到元组,我们一定要搞清楚它和数组的区别,或者他和数组的关系,混淆两者等于是浪费我们宝贵的时间,所以一定要学懂

元组可以看做是数组的拓展,它表示已知元素数量和类型的数组。确切地说,是已知数组中每一个位置上的元素的类型

你读懂这句话了吗,数组元素的类型

let tuple: [string, number, boolean];
tuple = ["a", 2, false];
tuple = [2, "a", false]; // error 不能将类型“number”分配给类型“string”。 不能将类型“string”分配给类型“number”。
tuple = ["a", 2]; // error Property '2' is missing in type '[string, number]' but required in type '[string, number, boolean]'
tuple = ["a", 2, false,"parm"] //在 2.6 及之前版本中,超出规定个数的元素"parm"称作越界元素

可以看到,上面我们定义了一个元组 tuple,它包含三个元素,且每个元素的类型是固定的。当我们为 tuple 赋值时:各个位置上的元素类型都要对应,元素个数也要一致。

当某个方法具有多个类型的参数时,我们可以封装为一个元组,学过java、c# 的同学可能懂了,元组是一种更加简单的bean

  • 给单个元素赋值
tuple[1] = 3;
tuple[2] = true;

在 2.6 之后的版本,[string, number]元组类型的声明效果上可以看做等同于下面的声明:

interface Tuple extends Array<number | string> {
    
    
  0: string; //第一个变量为string类型
  1: number; //第二个变量为number类型
  length: 2; // array的长度为2
}

接口Tuple,它继承数组类型,并且数组元素的类型是 number 和 string 构成的联合类型,这样接口Tuple 就拥有了数组类型所有的特性。并且我们明确指定索引为0的值为string类型,索引为1的值为number类型,同时我们指定 length 属性的类型字面量为 2,这样当我们再指定一个类型为这个接口Tuple的时候,这个值必须是数组,而且如果元素个数超过2个时,它的length就不是2是大于2的数了,就不满足这个接口定义了,所以就会报错。

扫描二维码关注公众号,回复: 14746269 查看本文章

元组里面有一个员宇宙,他有各种各样的元素,他是充实的,它对数量有限制。而数组里面是孤独的,他只有一种元素,它对数量没有限制。这样的解释只是为了帮你记住元组而不是理解元素。不过学过paython的同学一定懂得元组是什么,同时元组也是数据库的底层的一种类型。

4.2 交叉类型

交叉类型就是取多个类型的并集,使用 & 符号定义,被&符链接的多个类型构成一个交叉类型,表示这个类型同时具备这几个连接起来的类型的特点,来看例子:
T & U

const merge = <T, U>(arg1: T, arg2: U): T & U => {
    
    
  let res = <T & U>{
    
    }; // 这里指定返回值的类型兼备T和U两个类型变量代表的类型的特点
  res = Object.assign(arg1, arg2); // 这里使用Object.assign方法,返回一个合并后的对象;
                                   // 关于该方法,请在例子下面补充中学习
  return res;
};
const info1 = {
    
    
  name: "lison"
};
const info2 = {
    
    
  age: 18
};
const lisonInfo = merge(info1, info2);
 
console.log(lisonInfo.address); // error 类型“{ name: string; } & { age: number; }”上不存在属性“address”
 

Object.assign方法可以合并多个对象,将多个对象的属性添加到一个对象中并返回,有一点要注意的是,如果属性值是对象或者数组这种保存的是内存引用的引用类型,会保持这个引用,也就是如果在Object.assign返回的的对象中修改某个对象属性值,原来用来合并的对象也会受到影响

可以看到,传入的两个参数分别是带有属性 name 和 age 的两个对象,所以它俩的交叉类型要求返回的对象既有 name 属性又有 age 属性。学到这里你似乎感觉到typescript 名称的缘由了,就是各种各样的类型的;如果说JavaScript是一门像java的语言,那么TypeScript才是真正完成了这项使命,即面向对象的前端编程语言。

4.3 联合类型

联合类型实际是几个类型的结合,但是和交叉类型不同,联合类型是要求只要符合联合类型中任意一种类型即可,它使用 | 符号定义。当我们的程序具有多样性,元素类型不唯一时,即使用联合类型。
T | U
string | number

const getLength = (content: string | number): number => {
    
    
  if (typeof content === "string") return content.length;
  else return content.toString().length;
};
console.log(getLength("abc")); // 3
console.log(getLength(123)); // 3

其实元组、交叉类型、联合类型都是一种动态的高级类型,联合类型有点类似any类型,但它的元素类型范围是有明确声明的。

高级类型暂介绍到这里,文章持续更新,记得收藏。

猜你喜欢

转载自blog.csdn.net/gao511147456/article/details/128262367