如何将Object.keys(X)转为TypeScript类型？Chips组件color属性定义

原React组件Chips.jsx中的PropTypes定义如下：

Chips.propTypes = {
    className: PropTypes.string,
    color: PropTypes.oneOf(Object.keys(Chips.colors)),
}

其中Chips.colors的类型为Record<string, string>，具体键值对如下：

{
  GRASS_GREEN: "grass_green",
  DONE_GREEN: "done-green",
  BRIGHT_GREEN: "bright-green",
}

需要将上述PropTypes转换为TypeScript的ChipsProps接口，请问接口中color属性的类型应如何定义？

interface ChipsProps{
    className?: string,
    // color?: ?? 这里应该填什么
}

解决方案 #

有两种实用的实现方式，可根据你的代码维护需求选择：

方式1：直接使用字面量联合类型

如果Chips.colors的取值固定不变，可以直接把允许的color值写成字面量联合类型，简单直观：

interface ChipsProps {
    className?: string;
    color?: "grass_green" | "done-green" | "bright-green";
}

方式2：动态提取类型（推荐）

如果希望color的类型能自动同步Chips.colors的取值，避免手动重复维护，可以利用TypeScript的类型推断能力：

首先需要确保Chips.colors被定义为常量类型（添加as const标记，让TypeScript保留具体的字面量值，而非宽泛的string类型）：

const Chips = {
    colors: {
        GRASS_GREEN: "grass_green",
        DONE_GREEN: "done-green",
        BRIGHT_GREEN: "bright-green",
    } as const,
};

然后定义一个从Chips.colors中提取值类型的别名，再用到接口里：

// 提取Chips.colors所有值的类型
type ChipsColor = typeof Chips.colors[keyof typeof Chips.colors];

interface ChipsProps {
    className?: string;
    color?: ChipsColor;
}

后续如果Chips.colors新增或修改取值，ChipsColor类型会自动更新，无需手动修改ChipsProps接口。

内容的提问来源于stack exchange，提问作者Manas Telavane