如何在 TypeScript 中获取值为指定类型的对象的键

最新推荐文章于 2024-04-22 23:18:29 发布

清晰编程

最新推荐文章于 2024-04-22 23:18:29 发布

阅读量1.1k

点赞数 27

分类专栏：公众号文章标签： typescript

本文链接：https://blog.csdn.net/wannianchuan/article/details/136084436

版权

公众号专栏收录该内容

188 篇文章 2 订阅

订阅专栏

TypeScript 中一个常见的问题是，当你想获取一个对象的键值时，该对象的值是给定的类型，例如，假设你有一个这样的对象：

type Obj = {  a: string;  b: string;  c: number;  d: number;};

我们只想检索值为 string 的键，所以我们想得到 "a" | "b" 。

这看起来很棘手，但让我们试一试。

快速解决方案

这种技术使用键重映射来只提取字符串键：

你可以提供一个通用的条件来让它可重用：

解释

让我们看看我是如何得出这个解决方案的，我会试着带你走过我的思考过程。

如果你把这些泛型类型看作有开头、中间和结尾，那么它们就更容易理解。

在开始时，我们从一个简单的对象开始。

type Obj = {  a: string;  b: string;  c: number;  d: number;};

我们知道我们正在朝向键的 union 方向前进，所以我们知道 keyof 将被包含在某个地方：

type KeysOfObj = keyof Obj;// 'a' | 'b' | 'c' | 'd'

你可能会想，太棒了，我们已经完成了一半，现在我们需要做的就是排除没有字符串值的键，也许可以使用 Exclude 类型的帮助器：

当我们尝试填充 Exclude 的第二个类型参数时，问题变得明显起来，我们需要当前键的上下文来确定 Obj[Key] 是否是一个字符串。

所以我们类型的“中间”将是关于遍历每个键。整个故事很清楚——让我们实现它。

遍历每个键

有几种不同的方法可以实现这个目标，我最喜欢的是使用IIMT——即立即索引映射类型。

type Obj = {  a: string;  b: string;  c: number;  d: number;};
type KeysOfObj = {  // ^?  [K in keyof Obj]: `hello_${K}`;}[keyof Obj];

这让我们可以使用映射类型创建一个对象，然后使用 keyof Obj 索引到它，以输出我们创建的对象的值。

这样做的好处是，我们可以访问当前键和同一作用域中的对象，因此我们可以使用当前键来索引对象。

在本例中，我们使用它创建一个字符串字面量类型，每个键都带有 hello_ 前缀。

但是如果我们想根据值的类型做一些不同的事情呢？

条件类型

我们可以使用条件类型来完成这项工作。条件类型允许你用条件表达if/else逻辑：

type Obj = {  a: string;  b: string;  c: number;  d: number;};
type Tests = [  // ^?  Obj["a"] extends string ? true : false,  Obj["b"] extends string ? true : false,  Obj["c"] extends string ? true : false,  Obj["d"] extends string ? true : false];

在本例中，我们检查当前键的值是否为字符串，如果不是，则返回 never ，而不是 false 。

你会注意到，从技术上讲， KeysOfObj 的类型应该是 'a' | 'b' | never | never ：

type Obj = {  a: string;  b: string;  c: number;  d: number;};
type Tests = [  // ^?  Obj["a"] extends string ? "a" : never,  Obj["b"] extends string ? "b" : never,  Obj["c"] extends string ? "c" : never,  Obj["d"] extends string ? "d" : never];

但是 TypeScript 会自动从联合中移除 never ，所以我们最终得到的是 'a' | 'b' 。