TS中的泛型

文章目录

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

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

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

二、泛型用法

2.1 在函数中使用泛型

function test <T>(arg:T):T{
  console.log(arg);return arg;}
test<number>(111);// 返回值是number类型的 111
test<string | boolean>('hahaha')//返回值是string类型的 hahaha
test<string | boolean>(true);//返回值是布尔类型的 true

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

2.2 在接口中使用泛型

// 注意，这里写法是定义的方法哦interfaceSearch{<T,Y>(name:T,age:Y):T}letfn:Search=function<T,Y>(name:T,id:Y):T{
  console.log(name, id)return name;}fn('li',11);//编译器会自动识别传入的参数，将传入的参数的类型认为是泛型指定的类型

2.3 在类中使用泛型

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

三、泛型约束

3.1使用接口约束泛型

interfacePerson{name:string;age:number;}function student<TextendsPerson>(arg:T):T{return arg;}student({name:'lili'});//类型 "{ name: string; }" 中缺少属性 "age"，但类型 "Person" 中需要该属性student({name:"lili",age:'11'});//不能将类型“string”分配给类型“number”student({name:"lili",age:11});

3.2 数组泛型

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

四、泛型工具类型

4.1 Partial

partial<T>

的作用就是将某个类型中的属性全部变为可选项

?

示例：

interfacePerson{name:string;age:number;}function student<TextendsPerson>(arg: Partial<T>):Partial<T>{return arg;}

4.2 Record

Record<K extends keyof any, T>

的作用是将K中所有的属性转换为T类型；示例：

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

4.3 Pick

Pick<T, K extends keyof T>

的作用是将某个类型中的子属性挑出来，变成包含这个类型部分属性的子类型，示例：

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

4.4 Exclude

Exclude<T,U>

的作用是将某个类型中属于另一个类型的属性移除掉，示例：

type T0= Exclude<"a"|"b"|"c","a">;// "b" | "c"constt:T0='b';

4.5 ReturnType

returnType<T>

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

type T0= ReturnType<()=> string>;// string
type T1= ReturnType<(s: string)=>void>;// void
type T2= ReturnType<<T>()=>T>;// {}
type T3= ReturnType<<TextendsU,Uextendsnumber[]>()=>T>;// number[]
type T4= ReturnType<any>;// any
type T5= ReturnType<never>;// any
type T6= ReturnType<string>;// Error
type T7= ReturnType<Function>;// Error

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