如何为MUI v5 Chip的color属性做类型定义（值来自映射对象）

问题描述 #

当MUI Chip组件的color属性值来自映射对象时，该如何为其进行类型定义？目前使用any类型并非最佳方案，另外想确认使用keyof typeof CHIP_COLORS是否是正确的类型定义方式？

原始代码 #

import { Chip, Stack } from "@mui/material";

const DATA = [
  {
    id: 2,
    status: "success"
  },
  {
    id: 3,
    status: "finished"
  },
  {
    id: 4,
    status: "error"
  }
];

const CHIP_COLORS = {
  finished: "primary",
  error: "error",
  success: "success"
};

export default function App() {
  return (
      <Stack
        sx={{gap: 5}}
      >
        {DATA.map(({ id, status }) => {
          return (
              <Chip
                color={CHIP_COLORS[status as keyof typeof CHIP_COLORS] as any}
              />
          );
        })}
      </Stack>
  );
}

优化方案 #

1. 明确Chip color的合法类型 #

MUI Chip组件的color属性合法值为"primary" | "secondary" | "error" | "info" | "success" | "warning" | undefined，我们可以通过ChipProps类型直接引用该类型：

import { Chip, Stack, ChipProps } from "@mui/material";
type ChipColor = ChipProps['color'];

2. 约束映射对象与数据类型 #

• 给CHIP_COLORS添加as const断言，让TypeScript推断出精确的键值对类型，确保其值都是合法的Chip颜色值；
• 用keyof typeof CHIP_COLORS定义StatusType，约束DATA中的status字段只能是映射对象存在的键，避免非法取值。

修改后的代码：

import { Chip, Stack, ChipProps } from "@mui/material";

// 定义Chip color的合法类型
type ChipColor = ChipProps['color'];

// 用as const让映射对象的键值类型精确化
const CHIP_COLORS = {
  finished: "primary",
  error: "error",
  success: "success"
} as const;

// 提取映射对象的键作为Status类型
type StatusType = keyof typeof CHIP_COLORS;

// 约束DATA数组的类型，确保status只能是合法状态值
const DATA: Array<{ id: number; status: StatusType }> = [
  { id: 2, status: "success" },
  { id: 3, status: "finished" },
  { id: 4, status: "error" }
];

export default function App() {
  return (
    <Stack sx={{ gap: 5 }}>
      {DATA.map(({ id, status }) => {
        // 无需any断言，TypeScript自动识别类型合法
        return <Chip key={id} color={CHIP_COLORS[status]} />;
      })}
    </Stack>
  );
}

关于keyof typeof CHIP_COLORS的正确性 #

这种方式是完全正确的：

• typeof CHIP_COLORS会获取到映射对象的类型；
• keyof操作符提取该类型的所有键，形成联合类型"finished" | "error" | "success"；
• 用这个类型约束DATA的status字段，能确保只有映射对象中存在的状态值才会被使用，避免因非法状态导致color取值错误，同时让TypeScript能够正确推断CHIP_COLORS[status]的类型，无需any断言。

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