一、泛型是什么？有什么作用

当我们定义一个变量不确定类型的时候有两种解决方式：

• 使用any 使用any定义时存在的问题：虽然 以 知道传入值的类型但是无法获取函数返回值的类型；另外也失去了ts类型保护的优势
• 使用泛型
  泛型指的是在定义函数/接口/类型时，不预先指定具体的类型，而是在使用的时候在指定类型限制的一种特性。

二、泛型用法

2.1 在函数中使用泛型

function test <T> (arg:T):T{
  console.log(arg);
  return arg;
}
test<number>(111);
test<string | boolean>('hahaha')
test<string | boolean>(true);

• 1
• 2
• 3
• 4
• 5
• 6
• 7

使用方式类似于函数传参，传什么数据类型，T就表示什么数据类型， 使用表示，T也可以换成任意字符串。

2.2 在接口中使用泛型

interface Search {
  <T,Y>(name:T,age:Y):T
}

let fn:Search = function <T, Y>(name: T, id:Y):T {
  console.log(name, id)
  return name;
}
fn('li',11);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

2.3 在类中使用泛型

class Animal<T> {
 name:T;
 constructor(name: T){
  this.name = name;
 }
 action<T>(say:T) {
   console.log(say)
 }
}
let cat = new Animal('cat');
cat.action('mimi')

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

三、泛型约束

3.1使用接口约束泛型

interface Person {
  name:string;
  age:number;
}
function student<T extends Person>(arg:T):T {
  return arg;
}

student({name:'lili'});
student({ name: "lili" , age:'11'});
student({ name: "lili" , age:11});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

3.2 数组泛型

let arr:Array<number> =[1,2,3] === let arr:number[]=[1,2,3]

四、泛型工具类型

4.1 Partial

partial<T>的作用就是将某个类型中的属性全部变为可选项? 示例：

interface Person {
  name:string;
  age:number;
}
function student<T extends Person>(arg: Partial<T>):Partial<T> {
  return arg;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7

4.2 Record

Record<K extends keyof any, T>的作用是将K中所有的属性转换为T类型；示例：

interface PageInfo {
  title: string
}
type Page = 'home'|'about'|'other';
const x: Record<Page, PageInfo> = {
  home: { title: "xxx" },
  about: { title: "aaa" },
  other: { title: "ccc" },
};

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

4.3 Pick

Pick<T, K extends keyof T>的作用是将某个类型中的子属性挑出来，变成包含这个类型部分属性的子类型，示例：

interface Todo {
  title:string,
  desc:string,
  time:string
}
type TodoPreview = Pick<Todo, 'title'|'time'>;
const todo: TodoPreview ={
  title:'吃饭',
  time:'明天'
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

4.4 Exclude

Exclude<T,U>的作用是将某个类型中属于另一个类型的属性移除掉，示例：

type T0 = Exclude<"a" | "b" | "c", "a">; 
const t:T0 ='b';

• 1
• 2

4.5 ReturnType

returnType<T>的作用是用于获取函数T的返回类型，示例：

type T0 = ReturnType<() => string>; 
type T1 = ReturnType<(s: string) => void>; 
type T2 = ReturnType<<T>() => T>; 
type T3 = ReturnType<<T extends U, U extends number[]>() => T>; 
type T4 = ReturnType<any>; 
type T5 = ReturnType<never>; 
type T6 = ReturnType<string>; 
type T7 = ReturnType<Function>; 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

暂时先了解这么多，后续继续补充…