Typescript泛型

目录

一.简介

二.泛型接口的使用

三.泛型约束


一.简介

TypeScript中泛型的定义:在定义函数时,不决定函数的参数类型,而是让调用者以参数的形式告知,函数的参数应该是什么样的类型。

使用泛型之前,我们写函数的类型,是这样的:

TypeScript 复制代码
function identity(arg: any): any {
  return arg;
}

尽管使用 any类型可以让我们接受任何类型的 arg 参数,但也让我们丢失了函数返回时的类型信息。如果我们传入一个数字,我们唯一知道的信息是函数可以返回任何类型的值

所以我们需要一种可以捕获参数类型的方式,然后再用它表示返回值的类型

TypeScript 复制代码
function identity<Type>(arg: Type): Type {
  return arg;
}

这个Type 允许我们捕获调用者提供的类型,使得接下来可以使用这个类型,可以看到,返回值也使用了这个类型。这就是泛型。函数的参数和返回值的类型不是固定的,而是由函数的调用者决定的。

我们有两种方式调用上边的泛型函数:

  • 传入所有的参数(包括类型参数)
TypeScript 复制代码
let output = identity<string>("myString");  // output: string

在这里,我们使用 **<>**而不是 **()**包裹了参数,并明确的设置 Typestring作为函数调用的一个参数;

  • 使用类型推导
TypeScript 复制代码
let output = identity("myString"); // let output: string

这次我们并没有用 <> 明确的传入类型,当编译器看到 myString 这个值,就会自动设置 Type 为它的类型(即 string)。

二.泛型接口的使用

接口中也可以使用泛型:

TypeScript 复制代码
// 可以同时传入多个类型
interface User<T, N> {
    name: T,
    age: N
} 


const user: User<string, number> = {
    name: 'hsh',
    age: 18
}

user.name // ok
user.age // ok

三.泛型约束

有些时候,需要对Type做一些类型约束,以保证顺利通过编译。

假如现在有一个getLength函数:

TypeScript 复制代码
function getLength<T>(arg: T) {
    console.log(arg.length);  // Error: 类型"T"上不存在属性"length"
}

上边的写法会直接报错,因为Type可能是任意类型,而如果是number类型的话,是没有length属性的,这个时候要对泛型进行类型约束:

TypeScript 复制代码
// 使用接口约束
interface ILength {
    length: number
}

function getLength<T extends ILength>(arg: T) {
    console.log(arg.length);
}

getLength('111')  // ok
getLength(['111']) // ok
// getLength(111) // Error: 类型"number"的参数不能赋给类型"ILength"的参数

现在这个泛型函数被约束了,它不再适用于所有类型,我们需要传入符合约束条件的值

相关推荐
zhougl9962 小时前
html处理Base文件流
linux·前端·html
花花鱼2 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_2 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)4 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之5 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端5 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡5 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木6 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!6 小时前
优选算法系列(5.位运算)
java·前端·c++·算法