TypeScript枚举关联不同Props的类型映射问题排查

你当前的问题出在泛型的错误使用：直接把DrawerDataMap作为泛型参数T传入函数，导致props被要求匹配整个DrawerDataMap的结构（也就是一个包含CONTENT_A和CONTENT_B两个键的对象），但你实际传入的是对应单个枚举成员的Props，所以类型不匹配报错。

要实现「枚举成员对应不同Props类型」的需求，有两种更合理的实现方式：

方式一：使用联合类型（直观易读） #

直接定义所有枚举成员对应的完整数据结构，让TypeScript自动根据content的值推导props的类型：

enum DrawerContent {
  CONTENT_A,
  CONTENT_B,
}

interface ContentAData {
  username: string;
}

interface ContentBData {
  age: number;
}

// 定义所有合法的Drawer数据组合
type DrawerDataUnion = 
  | { title: string; content: DrawerContent.CONTENT_A; props: ContentAData }
  | { title: string; content: DrawerContent.CONTENT_B; props: ContentBData };

// 函数直接接收联合类型参数
function setDrawerContent(data: DrawerDataUnion) {
  // 业务逻辑
}

// 正确调用（无报错）
setDrawerContent({
  title: 'Title for Content A',
  content: DrawerContent.CONTENT_A,
  props: { username: 'some-class' }
})

// 错误调用（触发报错）
setDrawerContent({
  title: 'Title for Content A',
  content: DrawerContent.CONTENT_A,
  props: { age: 'some-class' }
})

方式二：使用泛型+索引访问类型（适合扩展） #

如果后续需要频繁添加枚举成员，这种方式更灵活，通过映射类型关联枚举和Props：

enum DrawerContent {
  CONTENT_A,
  CONTENT_B,
}

interface ContentAData {
  username: string;
}

interface ContentBData {
  age: number;
}

// 保持你的映射关系
interface DrawerDataMap {
  [DrawerContent.CONTENT_A]: ContentAData,
  [DrawerContent.CONTENT_B]: ContentBData,
}

// 泛型约束为DrawerDataMap的键（即枚举成员），通过索引访问获取对应Props类型
function setDrawerContent<K extends keyof DrawerDataMap>(data: {
  title: string;
  content: K;
  props: DrawerDataMap[K];
}) {
  // 业务逻辑
}

// 正确调用（自动推导类型，无报错）
setDrawerContent({
  title: 'Title for Content A',
  content: DrawerContent.CONTENT_A,
  props: { username: 'some-class' }
})

// 错误调用（触发报错）
setDrawerContent({
  title: 'Title for Content A',
  content: DrawerContent.CONTENT_A,
  props: { age: 'some-class' }
})

为什么原代码会报错？ #

原函数setDrawerContent<T>(data: DrawerData<T>)中，你手动指定T为DrawerDataMap，这意味着props的类型被设置为整个DrawerDataMap对象（结构为{ [CONTENT_A]: ContentAData; [CONTENT_B]: ContentBData }），但你传入的{ username: 'some-class' }完全不符合这个结构，因此TypeScript抛出错误。

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