如何在TypeScript中确保模态名称与对应Props类型的匹配关联？

核心思路：使用可辨识联合类型（Discriminated Union） #

通过定义一个将modalName和对应Props绑定在一起的联合类型，让TypeScript能够根据名称自动校验Props的类型合法性。

完整实现代码 #

import { ReactElement } from 'react';

// 原有的模态框组件类型定义
interface ModalType {
  preview: ReactElement;
  edit: ReactElement;
}

// 各模态框对应的Props类型
interface PreviewModalProps {
  username: string;
}

interface EditModalProps {
  title: string;
  description: string;
}

// 关键：定义名称与Props关联的联合类型
type ModalWithProps = 
  | { name: 'preview'; props: PreviewModalProps }
  | { name: 'edit'; props: EditModalProps };

// 模态框组件映射
const modals: ModalType = {
  preview: <PreviewModalComponent />,
  edit: <EditModalComponent />
};

// 示例：接收关联配置的函数（模拟打开模态框）
function openModal(config: ModalWithProps) {
  const ModalComponent = modals[config.name].type;
  return <ModalComponent {...config.props} />;
}

// 合法调用：preview对应正确的Props
openModal({ name: 'preview', props: { username: 'alice' } });

// 非法调用：TypeScript会直接报错（preview不能传入EditModalProps）
openModal({ name: 'preview', props: { title: '测试', description: '描述' } });

关键说明 #

1. 可辨识联合类型的作用：
   ModalWithProps是两个对象类型的联合，它们共享name这个字面量属性作为"辨识符"。TypeScript会通过name的值自动推断出props的类型，一旦出现名称与Props不匹配的情况，就会抛出类型错误。

2. 灵活扩展：
   如果后续新增模态框类型（比如delete），只需要在ModalType、对应的Props接口，以及ModalWithProps中添加新的分支即可：

   // 新增删除模态框
   interface DeleteModalProps {
     id: string;
     confirmText: string;
   }
   
   interface ModalType {
     preview: ReactElement;
     edit: ReactElement;
     delete: ReactElement; // 新增组件
   }
   
   type ModalWithProps = 
     | { name: 'preview'; props: PreviewModalProps }
     | { name: 'edit'; props: EditModalProps }
     | { name: 'delete'; props: DeleteModalProps }; // 新增关联
   

3. 单独获取对应Props类型（可选）：
   如果需要根据模态框名称单独提取对应的Props类型，可以使用条件类型：

   type PropsForModal<T extends keyof ModalType> = 
     T extends 'preview' ? PreviewModalProps :
     T extends 'edit' ? EditModalProps :
     T extends 'delete' ? DeleteModalProps :
     never;
   
   // 使用示例
   type DeleteProps = PropsForModal<'delete'>; // 等价于DeleteModalProps
   

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