位置: IT常识 - 正文
【前端进阶】-TypeScript高级类型 | 泛型约束、泛型接口、泛型工具类型(前端进阶路线)
编辑：rootadmin推荐整理分享【前端进阶】-TypeScript高级类型 | 泛型约束、泛型接口、泛型工具类型(前端进阶路线)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:前端基础进阶,前端技巧,前端进阶教程,前端进阶之旅,前端高手进阶,前端进阶教程,前端tl,前端高手进阶,内容如对您有帮助，希望把文章链接给更多的朋友！
前言
博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【TypeScript专栏】 前两篇文章讲解了TypeScript的一些高级类型 详细内容请阅读如下：🔽 【前端进阶】-TypeScript高级类型 | 交叉类型、索引签名类型、映射类型 【前端进阶】-TypeScript高级类型 | 类的初始化、构造函数、继承、成员可见性 今天来学习TypeScript另外一些高级类型！ 感兴趣的小伙伴一起来看看吧~🤞
文章目录泛型创建泛型函数调用泛型函数泛型约束泛型接口泛型类泛型工具类型1.Partial<Type>2.Readonly<Type>3. Pick<Type, Keys>4. Record<Keys,Type>泛型泛型是可以在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用，常用于：函数，接口，class中。
需求：创建一个id函数，传入什么数据就返回该数据本身（也就是说，参数和返回值类型相同）。
function id(value: number): number { return value }比如，id（10）调用以上函数就会直接返回10本身。但是，该函数只接受数值类型，无法用于其他类型。
为了能让函数接受任意类型，可以将参数类型修改为any。但是，这样就失去了TS的类型保护，类型不安全。
传入的类型与返回的类型应该是相同的。如果我们传入一个数字，我们只知道任何类型的值都有可能被返回。
function id(value: any): any { return value }泛型在保证类型安全（不丢失类型信息）的同时，可以让函数等与多种不同的类型一起工作，灵活可复用。
实际上，在C#和Java等编程语言中，泛型都是用来实现可复用组件功能的主要工具之一。
创建泛型函数function id<Type>(value: Type): Type { return value }解释：
语法：在函数名称的后面添加<><><>(尖括号)，尖括号中添加类型变量，比如此处的Type。类型变量Type，是一种特殊类型的变量，只用于表示类型而不是值。Type类型变量相当于一个类型容器，能够捕获用户传入的类型（比如：number）（具体是什么类型由用户>调用该函数时指定）。因为Type是类型，因此可以将其作为函数参数和返回值的类型，表示参数和返回值具有相同的类型。类型变量Type，可以是任意合法的变量名称。调用泛型函数// 使用泛型创建一个函数：function id<Type>(value: Type): Type { return value}//调用泛型函数：// 1 以number类型调用泛型函数const num = id<number>(10)// 2 以string类型调用泛型函数const str = id<string>('a')// 3 以boolean类型调用泛型函数const ret = id<boolean>(true)解释：
语法：在函数名称后面添加<><><>(尖括号)，尖括号中指定具体的类型，比如，此处的number。当传入类型number后，这个类型就会被函数上一篇：请求转发与重定向到底有哪些区别？(请求转发与重定义的区别)
下一篇：微信小程序 | 基于ChatGPT实现电影推荐小程序(微信小程序基于什么框架)