TypeScript 泛型的概念和基本使用

什么是TypeScript 泛型？

• 在定义函数，接口，类的时候不能预先确定使用的数据类型，而是在调用使用这些函数，接口，类的时候才能确定的数据类型；

1，单个泛型的参数

例如通过使用any这种方式，value1的类型随着传入的类型数据而变化：

function myfunction01(value1: any, value2: number): any[]{
	let arr: any[] = [value1, value2]
	return arr
}
myfunction01('123456', 111);
myfunction01(123456, 111);

改为泛型之后：

function myfunction01<T>(value1: T, value2: T): T[]{
	// let arr: T[] = [value1, value2]
	let arr: Array<T> = [value1, value2]
	return arr
}
myfunction01<string>('123456', '1111');
myfunction01<number>(123456, 111);

2，多个泛型的参数

function myfunction01<T, X&gt;(value1: T, value2: X): [T, X]{
	return [value1, value2]
}
myfunction01<string, number&gt;('123456', 1111);

3，泛型接口

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

interface 接口名<类型变量1,类型变量2&gt; {
  变量:类型变量1,
  变量:类型变量2
}

使用：

interface MyArray<T&gt; {
    length: T,
    data:string[]
    push(n: T): T,
    pop(): void,
    reverse(): T[]
}
const obj: MyArray<number> = {
  length: 11,
  push (o){ return o },
  pop: function () {},
  reverse: () => [1, 2],
  data: ['1', '1']
}

1. 在接口名称的后面添加 <类型变量>，那么，这个接口就变成了泛型接口。
2. 接口的类型变量，对接口中所有其他成员可见，也就是接口中所有成员都可以使用类型变量。
3. 使用泛型接口时，需要显式指定具体的类型。

4，泛型工具类型

泛型工具类型:TS 内置了一些常用的工具类型，来简化 TS 中的一些常见操作

说明:它们都是基于泛型实现的(泛型适用于多种类型，更加通用)，并且是内置的，可以直接在代码中使用。 这些工具类型有很多，先来学习以下3个:

① Partial

将一个对象类型中的所有属性变为可选属性；

type User = {
	id: number;name: string;age: number;
}
type UpdatedPerson = Partial<User>;

得到的 UpdatedPerson 类型与下面的类型定义是相同的：

type UpdatedPerson = {
	id?: number;name?: string;age?: number;
}

② Readonly

将Type 所有属性都设置为 readonly(只读)。

type Props =  {
  id: string
  children: number[]
}
type ReadonlyProps = Readonly<Props>

构造出来的新类型 ReadonlyProps 结构和 Props 相同，但所有属性都变为只读的。不可修改

③ Pick

Pick<Type, Keys> 从 Type 中选择一组属性来构造新类型。

type Props = {
  id: string
  title: string
  children: number[]
}
type PickProps = Pick<Props, 'id' | 'title'>

1. Pick 工具类型有两个类型参数:1 表示选择谁的属性 2 表示选择哪几个属性。 2. 其中第二个类型变量，如果只选择一个则只传入该属性名即可。
2. 第二个类型变量传入的属性只能是第一个类型变量中存在的属性。
3. 构造出来的新类型 PickProps，只有 id 和 title 两个属性类型。

代码007普通

打赏 收藏 海报 链接