TypeScript 从数组元素的值中定义 Union Type

[jtwang7]

TypeScript 从数组元素的值中定义 Union Type

参考文章：

• TypeScript 如何从数组元素的值中定义 Union Type

场景

本文处理下面这个 TypeScript 开发场景：
有一个数组，数组中每一项都是一个对象，我希望定义一个 Type，是由数组中的每个对象中的某个属性值组成的联合类型 (union type)

// 数组
const configs = [
  {
    name: 'width',
    value: '60px',
  },
  {
    name: 'height',
    value: '40px',
  }
];

我期望将 configs 中的每一项中的 name 的实际字符串值，提炼成一个 union type。

// 期望得到的 type
type ConfigName = 'width' | 'height';

最直接的做法是直接像上面一样手动定义一下。这样写的缺点是，如果 configs 中的元素又增加了，例如 name 的取值增加一个 'max-width' ，那我们需要更新 ConfigName 的的定义。无疑增加了维护成本。
使用 TypeScript 编程的原则之一：更少的类型维护，更安全的类型推断。

解决思路

首先，我们尝试用 typeof 来进行类型定义。

type ConfigName = typeof configs[number]['name'];

// 推断结果为
// type ConfigName = string;

// 期望：
// type ConfigName = "width" | "height";

这与我们实际期望不符，我们发现，被推断为了 string 类型。并不是我们期望的 union type

const 断言

使用 TypeScriptconst 断言
const 断言有以下两个作用：

• 表达式中任何字面类型都不应被扩展（例如，不能从 'hello' 变成 string)
• 对象和数组字面量获取 readonly 属性。

根据第 1 条规则，看上去好像可以恰好解决我们的问题，试一试：

// 对象断言为 const
const configs = [
  {
    name: 'width',
    value: '60px',
  },
  {
    name: 'height',
    value: '40px',
  }
] as const;

type ConfigName = typeof configs[number]['name'];

// 推断为:
// type ConfigName = "width" | "height";

// 期望：
// type ConfigName = "width" | "height";

缺点：推断的属性会被赋予 readonly 不可变属性

泛型函数 Generic Functions

在 TypeScript 中，我们想要描述两个值之间的对应关系时，会使用泛型。

type ConfigItem<T> = {
  name: T;
  value: string;
}

function defineConfigs<T extends string>(configs: Array<ConfigItem<T>>) {
  return configs;
}

const configs = defineConfigs([
  {
    name: 'width',
    value: '60px',
  },
  {
    name: 'height',
    value: '40px',
  }
]);

type ConfigName = typeof configs[number]['name'];

// 推断为:
// type ConfigName = "width" | "height";

// 期望：
// type ConfigName = "width" | "height";

原理：我们使用泛型函数在函数的输入和输出之间创建了一个链接，当调用它时，会根据其输入的具体值，得到一个具体的类型。

总结

至此，我们达到了最初的目的：

• 定义类型来约束值。应用于编写 configs 数组，数组的每个元素时一个对象，这个对象需要定义一个类型 ConfigItem，这样便于编写每个 config 的值。
• 通过值来推断类型。应用于获取实际的 configs 数组中的某个 value 的所有取值情况，这样不需要在 ConfigItem 中定义成 union type 了。减少定义 ConfigItem 里的 name 为 union type 的成本。