在 TypeScript 中从数组创建联合类型

Create a Union type from an Array in TypeScript

从数组创建联合类型：

用于as const将数组转换为只读元组。
用于typeof arr[number]获取包含所有数组元素的类型。
结果类型将是数组中所有元素的联合。

索引.ts


// 👇️ const sizes: readonly ["small", "medium", "large"]
const sizes = ['small', 'medium', 'large'] as const;

// 👇️ type SizesUnion = "small" | "medium" | "large"
type SizesUnion = typeof sizes[number];

我们曾经as const将数组的属性设置为readonly并向语言指示表达式的类型不会被扩大，例如 from
['small', 'medium']to string[]。

该语法
在 TypeScriptas const中称为
const 断言。

示例中的数组变为readonly元组，因此无法更改其内容。

索引.ts


// 👇️ const sizes: readonly ["small", "medium", "large"]
const sizes = ['small', 'medium', 'large'] as const;

// ⛔️ Error: Property 'push' does not exist
// on type 'readonly ["small", "medium", "large"]'
sizes.push('test');

如果您尝试更改数组的内容，则会出现错误。

这样 TypeScript 就可以将数组的类型推断为 as
['small', 'medium', 'large']和 not string[]。

typeof
运算符允许我们获取变量的类型。

索引.ts


// 👇️ const sizes: readonly ["small", "medium", "large"]
const sizes = ['small', 'medium', 'large'] as const;

// 👇️ type SizesUnion = "small" | "medium" | "large"
type SizesUnion = typeof sizes[number];

// 👇️ type T = readonly ["small", "medium", "large"]
type T = typeof sizes;

数组有一个
数字索引签名。

索引.ts


// 👇️ const sizes: readonly ["small", "medium", "large"]
const sizes = ['small', 'medium', 'large'] as const;

// 👇️ ['0', '1', '2']
console.log(Object.keys(sizes));

这就是为什么我们使用[number]语法来获取包含数组中所有值的联合。

我们基本上得到了数组中所有可以用number键索引的值。

–