如何将TypeScript接口的两个字段类型关联绑定？

问题背景 #

原接口定义里，IContractKpi的type和content是独立的联合类型，TypeScript无法建立两者的关联关系，导致在Vue组件中根据type渲染对应子组件时，content的类型无法被正确推断，触发类型报错。

原类型定义：

export interface IContractKpi {
  type: 'shipmentVolumes' | 'transitTime' | 'invoices';
  visible: boolean;
  content: IKpiContent;
}

export type IKpiContent =
  | IKpiShipmentVolumeContent[]
  | IKpiTransitTimeContent[]
  | IKpiInvoicesContent;

无论使用动态组件的lookup表写法，还是分支判断的写法，TypeScript都会因无法确认content与当前type的匹配关系而报错。

解决方案 #

核心是将IContractKpi从单一接口重构为联合类型，让每个type值与对应的content类型强绑定。

1. 重构类型定义 #

将IContractKpi拆分为三个子类型的联合，明确每个type对应的content类型：

// 保留原IKpiContent的子类型定义
interface IKpiShipmentVolumeContent { /* 子类型结构 */ }
interface IKpiTransitTimeContent { /* 子类型结构 */ }
interface IKpiInvoicesContent { /* 子类型结构 */ }

// 重构为联合类型，实现type与content的强关联
export type IContractKpi = 
  | {
      type: 'shipmentVolumes';
      visible: boolean;
      content: IKpiShipmentVolumeContent[];
    }
  | {
      type: 'transitTime';
      visible: boolean;
      content: IKpiTransitTimeContent[];
    }
  | {
      type: 'invoices';
      visible: boolean;
      content: IKpiInvoicesContent;
    };

2. 修复Vue组件的两种写法 #

写法一：分支判断渲染

重构类型后，TypeScript会通过kpi.type的判断自动窄化content的类型，直接使用分支写法即可消除报错：

<template>
  <KpiShipmentVolumes v-if="kpi.type === 'shipmentVolumes'" :content="kpi.content" />
  <KpiTransitTime v-if="kpi.type === 'transitTime'" :content="kpi.content" />
  <KpiInvoices v-if="kpi.type === 'invoices'" :content="kpi.content" />
</template>

<script setup lang="ts">
import KpiShipmentVolumes from './KpiShipmentVolumes.vue';
import KpiTransitTime from './KpiTransitTime.vue';
import KpiInvoices from './KpiInvoices.vue';
import type { IContractKpi } from './types';

const props = defineProps<{
  kpi: IContractKpi;
}>();
const { kpi } = props;
</script>

写法二：动态组件lookup表

给lookup表添加精确的类型关联，确保组件与对应的content类型匹配：

<script setup lang="ts">
import KpiShipmentVolumes from './KpiShipmentVolumes.vue';
import KpiTransitTime from './KpiTransitTime.vue';
import KpiInvoices from './KpiInvoices.vue';
import type { IContractKpi } from './types';
import type { Component } from 'vue';

const props = defineProps<{
  kpi: IContractKpi;
}>();
const { kpi } = props;

// 定义lookup表的精确类型，关联type、组件和content类型
type KpiComponentLookup = {
  [T in IContractKpi['type']]: Component<{
    content: Extract<IContractKpi, { type: T }>['content'];
  }>;
};

const lookup: KpiComponentLookup = {
  shipmentVolumes: KpiShipmentVolumes,
  transitTime: KpiTransitTime,
  invoices: KpiInvoices,
};

const kpiComponent = computed(() => lookup[kpi.type]);
</script>

<template>
  <component :is="kpiComponent" :content="kpi.content" />
</template>

3. 后端数据接收处理 #

后端返回的kpis: IContractKpi[]可以直接使用重构后的联合类型数组。如果后端返回的数据结构符合预期，TypeScript会自动识别每个元素的类型；若存在类型不确定性，可在接收时添加类型断言：

// 示例：API获取数据
const fetchKpis = async (): Promise<IContractKpi[]> => {
  const res = await fetch('/api/kpis');
  return res.json() as IContractKpi[];
};

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