当前位置: 首页 > ai >正文

TypeScript---泛型

一.简介

TypeScript 就引入了“泛型”(generics)。泛型的特点就是带有“类型参数”(type parameter)。

在日常 TypeScript 编程中,我们经常会遇到这样的场景:函数的参数类型与返回值类型密切相关。此时,泛型(Generics)就成为了我们编写灵活、高复用性代码的重要工具。

来看一个例子来明白泛型的重要性:

function getFristValue(arr: number[]): any {return arr[0]; // 返回数组的第一个数据
}

这段代码虽然工作正常,但 any 类型 丢失了类型之间的联系。我们无法知道传入的是 string[] 还是 number[],返回值类型也就不明确了。

于是,我们使用泛型来表达这种“输入与输出类型相关”的关系:

function getFirst<T>(arr: T[]): T {return arr[0];
}

这里的 <T> 就是类型参数,它类似于函数中的变量,调用函数时再决定 T 的具体类型。比如:

function getFirst<T>(arr: T[]): T {return arr[0];
}getFirst<number>([1, 2, 3]); // 返回 number 类型
getFirst(["a", "b", "c"]); // 推断为 string 类型

二.泛型的写法

1.function函数

function关键字定义的泛型函数,类型参数放在尖括号中,写在函数名后面。

function fun<T>(a: T): T {return a;
}console.log(fun<number>(1));

那么对于变量形式定义的函数,泛型有下面两种写法。

let my_function: <T>(a: T) => T = function <T>(a: T): T {return a;
};let you_function: <typr>(a: typr) => typr = function <typr>(a: typr): typr {return a;
};my_function<number>(10); // 10
you_function<string>("hello"); // "hello"

2.interface接口

interface Box<T> {contents: T;
}let box: Box<number> = { contents: 123 };

3.class类

class Pair<K, V> {constructor(public key: K, public value: V) {}
}const kv = new Pair<string, number>("age", 30);

也可以设置默认值:

class Generic<T = string> {list: T[] = [];add(item: T) {this.list.push(item);}
}const g = new Generic();
g.add("hello"); // 正确
g.add(123);     // 报错

注意:泛型类不能使用类型参数定义静态属性。

class Example<T> {static prop: T; // 报错
}

4.type类型别名

type Nullable<T> = T | null | undefined;type Container<T> = { value: T };const a: Container<number> = { value: 42 };

三.类型参数的默认值

类型参数可以设置默认值。使用时,如果没有给出类型参数的值,就会使用默认值。

function getFirst<T = string>(arr: T[]): T {return arr[0];
}

上面示例中,T = string表示类型参数的默认值是string。调用getFirst()时,如果不给出T的值,TypeScript 就认为T等于string

若调用时未显式提供类型,TypeScript 会自动推断,但默认值只有在无法推断时才会生效。

一旦类型参数有默认值,就表示它是可选参数。如果有多个类型参数,可选参数必须在必选参数之后。

function combine<T, U, V = boolean>(a: T, b: U, c: V): [T, U, V] {return [a, b, c];
}const res1 = combine(1, "hello", true);      // [number, string, boolean]
const res2 = combine("a", 2, false);         // [string, number, boolean]
const res3 = combine("x", 3, undefined);     // [string, number, boolean]

四.数组的泛型表示

TypeScript 原生的数据结构,如数组、Map、Set、Promise 都是泛型结构:

《数组》一章提到过,数组类型有一种表示方法是Array<T>。这就是泛型的写法,Array是 TypeScript 原生的一个类型接口,T是它的类型参数。声明数组时,需要提供T的值。

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

上面的示例中,Array<number>就是一个泛型,类型参数的值是number,表示该数组的全部成员都是数值。

同样的,如果数组成员都是字符串,那么类型就写成Array<string>。事实上,在 TypeScript 内部,数组类型的另一种写法number[]string[],只是Array<number>Array<string>的简写形式。

在 TypeScript 内部,Array是一个泛型接口,类型定义基本是下面的样子。

interface Array<Type> {length: number;pop(): Type | undefined;push(...items: Type[]): number;// ...
}

其他的 TypeScript 内部数据结构,比如MapSetPromise,其实也是泛型接口,完整的写法是Map<K, V>Set<T>Promise<T>

TypeScript 默认还提供一个ReadonlyArray<T>接口,表示只读数组。

function doStuff(values: ReadonlyArray<string>) {values.push("hello!"); // 报错
}

上面示例中,参数values的类型是ReadonlyArray<string>,表示不能修改这个数组,所以函数体内部新增数组成员就会报错。因此,如果不希望函数内部改动参数数组,就可以将该参数数组声明为ReadonlyArray<T>类型。

五.类型参数的约束条件

TypeScript 提供了一种语法,允许在类型参数上面写明约束条件,如果不满足条件,编译时就会报错。这样也可以有良好的语义,对类型参数进行说明。

function comp<T extends { length: number }>(a: T, b: T) {if (a.length >= b.length) {return a;}return b;
}

上面示例中,T extends { length: number }就是约束条件,表示类型参数 T 必须满足{ length: number },否则就会报错。

comp([1, 2], [1, 2, 3]); // 正确
comp("ab", "abc"); // 正确
comp(1, 2); // 报错

上面示例中,只要传入的参数类型不满足约束条件,就会报错。

类型参数的约束条件采用下面的形式。

<TypeParameter extends ConstraintType>

上面语法中,TypeParameter表示类型参数,extends是关键字,这是必须的,ConstraintType表示类型参数要满足的条件,即类型参数应该是ConstraintType的子类型。

类型参数可以同时设置约束条件和默认值,前提是默认值必须满足约束条件。

常见的约束类型

约束类型示例含义说明
{ length: number }T extends { length: number }要求有 length 属性
stringnumber 等原始类型T extends string只能传入对应类型
自定义接口或类T extends Person要求 T 是 Person 类型或其子类
联合类型T extends string | numberT 只能是 stringnumber

六.注意点

1.尽量少用泛型。

泛型虽然灵活,但是会加大代码的复杂性,使其变得难读难写。一般来说,只要使用了泛型,类型声明通常都不太易读,容易写得很复杂。因此,可以不用泛型就不要用。

2.类型参数越少越好。

多一个类型参数,多一道替换步骤,加大复杂性。因此,类型参数越少越好

3.类型参数需要出现两次。

如果类型参数在定义后只出现一次,那么很可能是不必要的。

4.泛型可以嵌套。

类型参数可以是另一个泛型。

http://www.xdnf.cn/news/15057.html

相关文章:

  • (7)机器学习小白入门 YOLOv:机器学习模型训练详解
  • map数据结构在Golang中是无序的,并且键值对的查找效率较高的原因
  • Linux 命令:tail
  • 如何查看自己本地的公网IP地址?内网环境网络如何开通服务器公网ip提供互联网访问?
  • Lecture #20:Database Logging
  • 深度解析 DApp 开发:从技术架构到商业落地的全链路解决
  • Jenkins 分布式和并发构建
  • RK3566/RK3568 Android11 修改selinux模式
  • 用 React Three Fiber 实现 3D 城市模型的扩散光圈特效
  • 策略模式实现
  • BP神经网络对时序数据进行分类
  • 用Python制作抖音风格短视频:从图片到精美视频的完整指南
  • Auto-GPT 简易教程
  • USB数据丢包真相:为什么log打印会导致高频USB数据丢包?
  • JavaScript加强篇——第三章 事件大全(完整版)
  • imx6ull-系统移植篇2—— U-Boot 命令使用(上)
  • vscode.window对象讲解
  • “SRP模型+”多技术融合在生态环境脆弱性评价模型构建、时空格局演变分析与RSEI 指数的生态质量评价及拓展应用
  • 深入解码 Docker 镜像与容器的奇妙世界
  • 飞算JavaAI:革新Java开发的智能助手
  • React Three Fiber 实现 3D 模型点击高亮交互的核心技巧
  • Microsoft Word 中 .doc 和 .docx 的区别
  • mongodb 开源同步工具介绍
  • 项目开发日记
  • 锁的艺术:从Mutex到ReentrantLock,掌握并发编程的脉搏
  • java多线程环境下资源隔离机制ThreadLocal详解
  • 《PyQt6-3D:开启Python 3D编程新世界 2》
  • 多线程学习
  • 处理Web请求路径参数
  • 【笔记】使用 html 创建网址快捷方式