从 TypeScript 的联合类型生成字符串数组

Question

从 TypeScript 的联合类型生成字符串数组

13

大家好，我正在寻找一种从 TypeScript 联合类型中获取数组的方法。

以下是现有的类型：

 export type GridClassKey =
  | 'root'
  | 'container'
  | 'item'
  | 'zeroMinWidth'
  | 'direction-xs-column'
  | 'direction-xs-column-reverse'
  | 'direction-xs-row-reverse'
  | 'wrap-xs-nowrap'
  | 'wrap-xs-wrap-reverse'
  | 'align-items-xs-center'
  | 'align-items-xs-flex-start'
  | 'align-items-xs-flex-end'
  | 'align-items-xs-baseline'
  | 'align-content-xs-center'
  | 'align-content-xs-flex-start'
  | 'align-content-xs-flex-end'
  | 'align-content-xs-space-between'
  | 'align-content-xs-space-around'
  | 'justify-xs-center'
  | 'justify-xs-flex-end'
  | 'justify-xs-space-between'
  | 'justify-xs-space-around'
  | 'justify-xs-space-evenly'
  | 'spacing-xs-1'
  | 'spacing-xs-2'
  | 'spacing-xs-3'
  | 'spacing-xs-4'
  | 'spacing-xs-5'
  | 'spacing-xs-6'
  | 'spacing-xs-7'
  | 'spacing-xs-8'
  | 'spacing-xs-9'
  | 'spacing-xs-10'
  | 'grid-xs-auto'
  | 'grid-xs-true'
  | 'grid-xs-1'
  | 'grid-xs-2'
  | 'grid-xs-3'
  | 'grid-xs-4'
  | 'grid-xs-5'
  | 'grid-xs-6'
  | 'grid-xs-7'
  | 'grid-xs-8'
  | 'grid-xs-9'
  | 'grid-xs-10'
  | 'grid-xs-11'
  | 'grid-xs-12'

我希望能从程序中获取一个真正的字符串数组，类似于：

['root','container', ...]

因为GridClassKey是一种类型而不是值，所以这是可能的吗？

谢谢

- Topsy

2

不，不是这样的，因为如果在运行时类型不存在，你就无法组装一个数组。 - Ingo Bürk

我记得看到过一个 NPM 库，它可以生成基于类型的数组文件，就像这个例子一样。但是现在我找不到它了。我真希望能找到它。 - Adam D

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shivam Singla · Accepted Answer

由于如果在运行时没有类型存在，我们无法创建一个数组，所以我们无法从该类型中创建一个数组（@Ingo Bürk的评论）。但是我们可以反过来做。如果我们有一个常量数组，我们可以为它获取一个联合类型。例如-

const gridClassKeys = ['root', 'container'] as const

// "root" | "container"
type GridClassKey = typeof gridClassKeys[number]

游乐场

请注意，在声明数组时，我们必须使用常量断言（该数组将是只读元组，因此键固定）。