如何在TypeScript中根据ChartType类型推断xData与seriesData的类型？

要实现根据type字段的不同值自动约束xData和seriesData的类型，你需要使用区分联合类型（Discriminated Union），而非单一接口。这种方式通过共同的判别字段（这里是type）让TypeScript自动推断其他字段的类型。

具体实现代码 #

type ChartType = 'bar' | 'line' | 'pie';

// 为每种图表类型定义独立的Props结构
type BarProps = {
  type: 'bar';
  xData: string[];
  seriesData: number[];
};

type LineProps = {
  type: 'line';
  xData: Array<string | number>;
  seriesData: string[];
};

type PieProps = {
  type: 'pie';
  xData: number[];
  seriesData: { value: string; name: string }[];
};

// 将所有子类型联合为最终的PropsType
type PropsType = BarProps | LineProps | PieProps;

const props = defineProps<PropsType>();

类型推断效果 #

当你通过type字段进行分支判断时，TypeScript会自动推断对应分支里xData和seriesData的类型：

if (props.type === 'bar') {
  // 此处xData被推断为string[]，seriesData为number[]
  props.xData.forEach(item => console.log(item.toUpperCase()));
  props.seriesData.forEach(item => console.log(item + 1));
} else if (props.type === 'pie') {
  // 此处xData被推断为number[]，seriesData为{value:string,name:string}[]
  props.seriesData.forEach(item => console.log(`${item.name}: ${item.value}`));
}

这种写法的核心是利用TypeScript对联合类型的歧化处理能力，通过固定的type字段作为判别标识，让类型系统自动关联对应字段的类型约束，既保证了类型安全，又能获得精准的编辑器提示。

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