TypeScript 从入门到进阶之基础篇(六) 类型(断言 、推论、别名)| 联合类型 | 交叉类型

2024-01-08 23:11:35

在这里插入图片描述

系列文章目录

TypeScript 从入门到进阶系列

  1. TypeScript 从入门到进阶之基础篇(一) ts基础类型篇
  2. TypeScript 从入门到进阶之基础篇(二) ts进阶类型篇
  3. TypeScript 从入门到进阶之基础篇(三) 元组类型篇
  4. TypeScript 从入门到进阶之基础篇(四) symbol类型篇
  5. TypeScript 从入门到进阶之基础篇(五) 枚举类型篇
    持续更新中…


前言

在一到五章,我们学习了在TypeScript 中 定义和使用各种类型 ,本章我们来学习TypeScript 在 类型(断言 、推论、别名)| 联合类型 | 交叉类型
请注意 本章内容 可能会出现在你面试时的面试题 是面试题常问的内容


一、联合类型

在 TypeScript 中,联合类型是指可以同时具有多个类型的类型。它使用 | 符号来表示多个类型之间的联合关系。
联合类型的变量可以接受其中任意一个类型的值。

例如,可以定义一个变量,它可以接受 string 或 number 类型的值:

let myVariable: string | number;

这样,myVariable 变量可以被赋值为一个字符串或一个数字,如下所示:

myVariable = "Hello World";
myVariable = 123;

联合类型在函数参数、返回值以及变量声明等场景中非常有用。它可以增加代码的灵活性,使得代码更加健壮和可维护。

二、交叉类型

在TypeScript中,交叉类型(Intersection
Types)是一种组合多个类型的方式。交叉类型可以将多个类型合并成一个类型,从而具备合并类型的所有特性。

交叉类型使用&符号表示,例如type A = B & C;,表示类型A是同时具备类型B和类型C的属性和方法。

交叉类型的作用是将多个类型的特性合并在一起,使得一个对象具备多个类型的属性和方法。举个例子,假设有一个接口A表示可触发事件的对象,以及一个接口B表示可拖拽的对象,可以通过交叉类型将两个接口合并成一个新的接口C,表示既可以触发事件又可拖拽的对象。

interface A {
  on(event: string, callback: () => void): void;
}

interface B {
  drag(): void;
}

type C = A & B;

const obj: C = {
  on(event, callback) {
    // 触发事件的逻辑
  },
  drag() {
    // 拖拽的逻辑
  }
};

通过上述例子可以看出,交叉类型可以让对象具备多个类型的特性,并且可以通过类型注解来保证对象满足合并类型的要求。

类型(断言 、推论、别名) 面试常问

1、类型断言(重点)

在 TypeScript 中,类型断言(Type Assertion)是一种告诉编译器某个值的类型的方式。类型断言可以在编译时确定某个值的类型,方便进行类型检查和类型推断。

有两种形式的类型断言:

1.1、 尖括号语法:

let str: any = "hello";
let length: number = (<string>str).length;

在尖括号内指定要断言的类型,在这个例子中断言 str 是一个字符串类型。编译器会将 str 的类型视为 string,从而可以调用 length 属性。

1.2、 as语法:

let str: any = "hello";
let length: number = (str as string).length;

使用 as 关键字,将要断言的类型放在 as 的后面。这个例子与上面的例子是等效的。

需要注意的是,类型断言只会在编译时起作用,不会改变原始值的类型。所以在进行类型断言时要确保断言的类型是正确的,否则可能会导致类型错误。

2、类型推论

在TypeScript中,类型推论是指 TypeScript编译器自动根据变量的初始值推断其类型的过程。当你声明一个变量并赋予初始值时,TypeScript编译器会根据这个初始值的类型来推断该变量的类型。

例如,当你声明一个变量并直接赋值一个数字时:

let num = 10;

//注意 如果你定义了一个类型 但没有给其赋值
//那么 a 的类型为 any
let a;

TypeScript 编译器会根据初始值 10 推断出 num 的类型为 number。这样,在后续的代码中,你就可以使用 num 作为一个数字类型的变量,并且编译器会对相关的类型进行检查。

又例如,vue3中 ref 的使用 在赋值时会自动推论类型

const bool=ref(true)
const str=ref('类型')

类型推论的好处是可以减少手动类型注解的工作量,并且使代码更简洁。然而,当初始值无法明确推断出类型时,你可能需要手动添加类型注解来指定变量的类型。

3、类型别名

在 TypeScript 中,类型别名(Type Alias)允许我们给一个类型起一个新的名字。通过使用类型别名,我们可以用一个简洁的名称来表示复杂的类型。

类型别名可以用来命名任何类型,包括原始类型(如字符串、数字等),联合类型,交叉类型,对象类型等。比如:

type MyString = string;
type MyNumber = number;
type MyBoolean = boolean;

// 联合类型
type MyUnion = string | number;

// 交叉类型
type MyIntersection = MyNumber & MyBoolean;

// 对象类型
type MyObject = {
  prop1: string;
  prop2: number;
};

使用类型别名可以增加代码的可读性和可维护性,特别是在处理复杂的类型时。类型别名的语法是 type 关键字加上一个名称,后面紧跟等号和类型定义。

类型别名还可以用于定义泛型类型,函数类型等。通过使用类型别名,我们可以将复杂的类型定义简化为一个具有描述性的名称,提高代码的可读性和可理解性。

文章来源:https://blog.csdn.net/weixin_49014702/article/details/135436130
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。