ts中的泛型作用（TS中的泛型）

时间2025-06-14 03:00:14分类IT科技浏览4743

导读：一、泛型是什么？有什么作用当我们定义一个变量不确定类型的时候有两种解决方式：...

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

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

使用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 在接口中使用泛型

// 注意，这里写法是定义的方法哦 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);//编译器会自动识别传入的参数，将传入的参数的类型认为是泛型指定的类型

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)

三、泛型约束

3.1使用接口约束泛型

interface Person { name:string; age:number; } function student<T extends Person>(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的作用就是将某个类型中的属性全部变为可选项?

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

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" }, };

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:明天 }

4.4 Exclude

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

type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c" const t: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<<T extends U, U extends number[]>() => T>; // number[] type T4 = ReturnType<any>; // any type T5 = ReturnType<never>; // any type T6 = ReturnType<string>; // Error type T7 = ReturnType<Function>; // Error

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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。