【黑马TS】学习资料Day2+3

珊珊而川

已于 2024-06-20 15:37:56 修改

阅读量855

点赞数 16

分类专栏： TypeScript ts开发知识文章标签：开发语言 TS

于 2024-06-19 15:36:40 首次发布

本文链接：https://blog.csdn.net/weixin_63681863/article/details/139801286

版权

ts开发知识同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

TypeScript

4 篇文章 0 订阅

订阅专栏

四、TypeScript 高级类型

4.1 class类

4.2 类型兼容性

4.3 交叉类型

4.4 泛型

泛型是可以在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用，常用于：函数、接口、class 中。
需求：创建一个 id 函数，传入什么数据就返回该数据本身（也就是说，参数和返回值类型相同）。
在这里插入图片描述泛型在保证类型安全（不丢失类型信息）的同时，可以让函数等与多种不同的类型一起工作，灵活可复用。
实际上，在 C＃和 Java 等编程语言中，泛型都是用来实现可复用组件功能的主要工具之一。

1. 泛型函数

🏔️创建泛型函数

function id<Type>(value: Type): Type {
  return value;
}

解释：

语法：在函数名称的后面添加 <>（尖括号），尖括号中添加类型变量，比如此处的 Type。
类型变量 Type，是一种特殊类型的变量，它处理类型而不是值。
该类型变量相当于一个类型容器，能够捕获用户提供的类型（具体是什么类型由用户调用该函数时指定）。
因为 Type 是类型，因此可以将其作为函数参数和返回值的类型，表示参数和返回值具有相同的类型。
类型变量 Type，可以是任意合法的变量名称。

🏔️调用泛型函数

在这里插入图片描述解释：

语法：在函数名称的后面添加 <>（尖括号），尖括号中指定具体的类型，比如，此处的 number。
当传入类型 number 后，这个类型就会被函数声明时指定的类型变量 Type 捕获到。
此时，Type 的类型就是 number，所以，函数 id 参数和返回值的类型也都是 number。
同样，如果传入类型 string，函数 id 参数和返回值的类型就都是 string。
这样，通过泛型就做到了让 id 函数与多种不同的类型一起工作，实现了复用的同时保证了类型安全。

🏔️简化泛型函数

在这里插入图片描述
解释：

在调用泛型函数时，可以省略 <类型> 来简化泛型函数的调用。
此时，TS 内部会采用一种叫做类型参数推断的机制，来根据传入的实参自动推断出类型变量 Type 的类型。
比如，传入实参 10，TS 会自动推断出变量 num 的类型 number，并作为 Type 的类型。
推荐：使用这种简化的方式调用泛型函数，使代码更短，更易于阅读。
说明：当编译器无法推断类型或者推断的类型不准确时，就需要显式地传入类型参数。

2. 泛型约束

默认情况下，泛型函数的类型变量 Type 可以代表多个类型，这导致无法访问任何属性。
比如，id(‘a’) 调用函数时获取参数的长度：
在这里插入图片描述解释：Type 可以代表任意类型，无法保证一定存在 length 属性，比如 number 类型就没有 length。
此时，就需要为泛型添加约束来收缩类型（缩窄类型取值范围）。

添加泛型约束收缩类型，主要有以下两种方式：

🌋方法1. 指定更加具体的类型

function id<Type>(value: Type[]): Type[] {
  return value;
}

id([1, 1, 1, 11, 34]);
id(["www", "eeee"]);

比如，将类型修改为 Type[]（Type 类型的数组），因为只要是数组就一定存在 length 属性，因此就可以访问了。

🌋方法2. 添加约束

在泛型函数中，我们通常使用泛型参数来定义函数可以接受的类型，并通过 extends 关键字进行类型约束。

interface ILength {
  length: number;
}

function id<Type extends ILength>(value: Type[]): Type[] {
  return value;
}

// id([1, 1, 1, 11, 34]); //报错： Type 'number' is not assignable to type 'ILength'
id(["www", "eeee"]);

解释：

创建描述约束的接口 ILength，该接口要求提供 length 属性。
通过 extends 关键字使用该接口，为泛型（类型变量）添加约束。
该约束表示：传入的类型必须具有 length 属性。
注意：传入的实参（比如，数组）只要有 length 属性即可，这也符合前面讲到的接口的类型兼容性。

3.变量类型之间约束、keyok

泛型的类型变量可以有多个，并且类型变量之间还可以约束（比如，第二个类型变量受第一个类型变量约束）。
比如，创建一个函数来获取对象中属性的值：

插播一条小技巧：
在定义函数返回值类型的时候，不知道返回什么，就把鼠标放上去，看提示
在这里插入图片描述

function fun1<Type, Key extends keyof Type>(obj: Type, key: Key): Type[Key] {
  return obj[key];
}
let person = { name: "sss", age: 11 };
console.log(fun1(person, "name"));
// console.log(fun1(person, "sex")); 报错

在这里插入图片描述

解释：

添加了第二个类型变量 Key，两个类型变量之间使用（,）逗号分隔。
keyof 关键字接收一个对象类型，生成其键名称（可能是字符串或数字）的联合类型。
想到了JS中的Object.keys()

const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj); // ["a", "b", "c"]

本示例中 keyof Type 实际上获取的是 person 对象所有键的联合类型，也就是：‘name’ | ‘age’。
类型变量 Key 受 Type 约束，可以理解为：Key 只能是 Type 所有键中的任意一个，或者说只能访问对象中存在的属性。

注意：
keyof 是一个类型操作符，只能在类型上下文中使用，不能在值上下文中直接使用。

interface MyObj {
    a: number;
    b: string;
    c: boolean;
}

type KeysType = keyof MyObj; // "KeysType" 的类型将是 "a" | "b" | "c"

console.log(keyof MyObj); // 报错，keyof MyObj 是一个类型操作符，它只能在类型上下文中使用，而不能在值上下文中使用。

4. 泛型接口

接口也可以配合泛型来使用，以增加其灵活性，增强其复用性

interface IdFun<T> {
  id: (value: T) => T; // 注意这里的函数返回值是箭头的写法
  ids: () => T[];
}

let obj: IdFun<number> = {
  id: (value) => value,
  ids() {
    // 这种写法也可以
    return [1, 2, 3];
  },
};

调用的时候记得给出泛型参数：
在这里插入图片描述
实际上，JS 中的数组在 TS 中就是一个泛型接口。

在这里插入图片描述解释：当我们在使用数组时，TS 会根据数组的不同类型，来自动将类型变量设置为相应的类型。
技巧：可以通过 Ctrl + 鼠标左键（Mac：option + 鼠标左键）来查看具体的类型信息。或者直接鼠标放上去也行

其他例子：

interface Obj {
  name: string;
  age: number;
  sayHi: (str: string) => void;
}
interface MyObj<T> extends Obj {
  value: T;
}

// 注意这里的写法是，先接口，后面才是泛型参数
const obj3: MyObj<number> = {
    value: 2,
    name: "sss",
    age: 323,
    sayHi: (str) => {
      console.log("Hello" + str);
    },
  };