TypeScript枚举赋值报错：ChartType无法赋值给DataTableChartType

问题代码与报错 #

export enum ChartType {
  Table = 'Table',
  Pie = 'Pie',
  DonutPie = 'DonutPie',
  Column = 'Column',
  Bar = 'Bar',
  Line = 'Line',
  StackedBar = 'StackedBar',
  StackedColumn = 'StackedColumn',
  DonutStat = 'DonutStat',
  HalfDonutStat = 'HalfDonutStat',
  ProgressBarStat = 'ProgressBarStat',
  IconStat = 'IconStat',
  Area = 'Area',
  StackedArea = 'StackedArea',
}

type DataTableChartType = typeof ChartType["Pie"]
  | typeof ChartType["DonutPie"]
  | typeof ChartType["Column"]
  | typeof ChartType["Bar"]
  | typeof ChartType["Line"]
  | typeof ChartType["Area"]
  | typeof ChartType["StackedColumn"]
  | typeof ChartType["StackedBar"]


type ChartOptionType = {
  value: DataTableChartType,
  label: string,
  icon: ReactElement,
}

type AvailableChartsType = {
  [key in DataTableChartType]: ChartOptionType;
};

const AVAILABLE_CHARTS: AvailableChartsType = {
  [ChartType["Pie"]]: {
    value: ChartType["Pie"],           // 此处报错
    label: 'Pie chart',
    icon: <PieChartIcon width='15' />,
  }
}

报错信息：

TS2322: Type 'ChartType' is not assignable to type 'DataTableChartType'.
ChartWidgetToolbar.tsx(69, 3): The expected type comes from property 'value' which is declared here on type 'ChartOptionType'

疑问：明明ChartType["Pie"]属于DataTableChartType的范围，为何直接赋值会报错，必须用类型断言或者修改value类型为string才能解决？

原因解析 #

1. 枚举成员的类型特性：字符串枚举的成员（如ChartType.Pie），TypeScript默认推断其类型为整个枚举类型ChartType，而非对应的字符串字面量"Pie"。
2. 类型范围不匹配：你定义的DataTableChartType是一组字符串字面量的联合类型（"Pie" | "DonutPie" | ...），而不是枚举成员类型的联合。TypeScript认为ChartType类型的范围比DataTableChartType更广（还包含Table、DonutStat等不在联合中的成员），无法确保当前赋值的ChartType.Pie一定属于目标类型的子集，因此抛出类型不兼容错误。
3. 类型断言的作用：as DataTableChartType是手动告诉TypeScript“我确认这个值符合目标类型”，强制跳过编译器的类型检查，从而解决报错。

更优解决方案 #

除了类型断言，推荐调整DataTableChartType的定义，直接使用枚举成员类型的联合，这样无需断言即可正常赋值：

// 修改为枚举成员类型的联合
type DataTableChartType = ChartType.Pie
  | ChartType.DonutPie
  | ChartType.Column
  | ChartType.Bar
  | ChartType.Line
  | ChartType.Area
  | ChartType.StackedColumn
  | ChartType.StackedBar;

此时ChartType.Pie的类型就是ChartType.Pie，属于DataTableChartType的联合成员，赋值时TypeScript能直接识别类型兼容性，不会再报错。

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