如何根据对象值创建窄类型

Question

我正在从流程转向打字稿，我遇到了一些我无法弄清楚该怎么做的事情。 在流程中，我有以下几点：

const color = Object.freeze({
  white: '#ffffff',
  black: '#000000',
})

type PossibleColorValues = $Values<typeof color>

在这种情况下， PossibleColorValues '#ffffff' | '#000000'是'#ffffff' | '#000000' '#ffffff' | '#000000'

打字稿中是否有与此等效的内容？ 我尝试了以下方法：

type PossibleColorValues = typeof color[keyof typeof color]

但在这种情况下， PossibleColorValues值只是string

Answer 1

您对如何获得对象中所有可能值的联合有正确的想法。 typeof color[keyof typeof color]应该可以解决问题。

问题是color不保留当前定义的原始类型。 您需要说服编译器保留您最初在对象文字中分配的字符串文字类型。

在尚未发布的 3.4 中，您可以使用as const来让编译器知道您需要文字类型和只读对象。 因此，这将在 3.4 中按预期工作（再次可能在本月发布 3.4 时）：

const color = Object.freeze({
  white: '#ffffff',
  black: '#000000',
} as const)

type PossibleColorValues = typeof color[keyof typeof color]

同时，您可以使用函数让编译器推断文字类型：

declare function withLiterals<
    T extends Record<string, V>, 
    V extends string | boolean | number | symbol | null | undefined | Record<string, V>
>(input: T ): T;

const color = Object.freeze(withLiterals({
    white: '#ffffff',
    black: '#000000',
}));

type PossibleColorValues = typeof color[keyof typeof color]