typescript 使用对象或数组的值或键创建联合类型

前言

实际开发中我需要用到太多的键值对，并且有相当一部分情况下，键名是一个联合，而且还是某个数组的联合，然而早期 TS 对这样的联合实现并不是很理想。

这几天又翻了翻 Stack Overflow，发现很多新答案，对此整理一下。

后面的内容最主要的是针对 TS 增加了 字面量常量上下文表达式(Const contexts for literal expressions) 而展开的，所以需了解下它，为了简化，后面简称为 常量字面量。

常量字面量确定了一个对象或数组的所有子级是只读的，也就是不可修改。

比如声明一个常量：

const obj = {
  foo: "one",
  bar: "aaa",
};

默认情况下，这个对象的类型如下：

type Obj = {
  foo: string;
  bar: string;
};

因为常量是只读的，所以一般会这么做：

type Obj = Readonly<{
  foo: "one";
  bar: "aaa";
}>;

const obj: Obj = {
  foo: "one",
  bar: "aaa",
};

重复再写一遍，累死个人啦。

TS 把上面的这种完全常量的类型断言为常量字面量，可以使用 const 关键字来断言，比如：

const obj = <const>{
  foo: "one",
  bar: "aaa",
};
// or
const obj2 = {
  foo: "one",
  bar: "aaa",
} as const;

上面两种方式都可以把对象或者数组断言为常量字面量。

对象或者数组通过断言为常量字面量后，所有内部属性都是只读的，上面的类型为：

const obj: {
  readonly foo: "one";
  readonly bar: "aaa";
};

这个东西和联合有什么关系？

因为这些数据都是只读的，所以这些对象或者数组的值都会被定义为字面量，就比如：

// type is : string[]
const arr = ["foo", "bar", "baz"];

// type is : readonly ["foo", "bar", "baz"]
const arr2 = ["foo", "bar", "baz"] as const;

上面的代码中， arr 的类型是 string[]，但是 arr2 的类型就变为了一个只读元组 readonly ["foo", "bar", "baz"]，此时它的值是常量，并且元组本身只读。

好玩的来了，那么拿这个只读元组的值作为类型如何，比如：

const arr2 = ["foo", "bar", "baz"] as const;

// type is : "foo" | "bar" | "baz"
type Values = typeof arr2[number];

此时 Values 的类型将会成为只读元组 arr2 的值的联合。

接下来分析下常量字面量断言的应用。

使用字符串数组的值创建联合

比如现在有一个字符串数组如下：

const arr = ["foo", "bar", "baz"];

//现在我们需要根据数组的值来创建一个这样的联合：
type Keys = "foo" | "bar" | "baz";

可以这样定义这个联合：

const arr = <const>["foo", "bar", "baz"];

type Keys = typeof arr[number];

使用对象的键创建联合

使用对象的键创建联合：

const obj = {
  foo: 1,
  bar: 2,
  baz: 3,
} as const;

// 同上一节需要得到使用键名生成的联合，那么可以这样编写类型：
// type si : "foo" | "bar" | "baz";
type Keys = keyof typeof obj;

使用对象的值作为联合

有时候我们希望把对象的值作为一个联合，可以使用以下方法：

const obj = {
  k1: "foo",
  k2: "bar",
  k3: "baz",
} as const;

// type Keys = "foo" | "bar" | "baz"
type Keys = typeof obj[keyof typeof obj];

还有的特殊情况是辨识联合，比如一个对象数组如下

const objs = [
  { name: "foo", other: "something" },
  { name: "bar", other: "something" },
  { name: "baz", other: "something" },
];

此时我们需要使用这个对象数组中每项的 name 创建一个联合，那么可以这样实现：

const objs = [
  { name: "foo", other: "something" },
  { name: "bar", other: "something" },
  { name: "baz", other: "something" },
] as const;

// type Keys = "foo" | "bar" | "baz"
type Keys = typeof objs[number]["name"];

使用联合作为对象的键名

有时候需要反向操作，把一个联合作为一个对象的键名，比如以下需求：

const keys = ["foo", "bar", "baz"];
const obj = {};

keys.forEach((v) => (obj[v] = true));

此时 obj 的类型是 string[]，这明显不是我们预期的，因为程序运行结束 obj 的键名都是由 keys 数组的值映射的。

不过可以使用以下方式解决这个问题：

const keys = ["foo", "bar", "baz"] as const;

const obj: {
  [index in typeof keys[number]]?: boolean;
} = {};

keys.forEach((v) => (obj[v] = true));

// 此时 `obj` 的类型为：
// const obj: {
//   foo?: boolean;
//   bar?: boolean;
//   baz?: boolean;
// };

参考

Convert array of strings to TypeScript type

Typescript: derive union type from array of objects

Typescript derive union type from tuple/array values