TypeScript：如何为映射函数指定仅接受IBlock子类型的返回类型

核心思路 #

利用TypeScript的泛型+条件类型+索引类型，将枚举值、组件与对应IBlock子类型做关联，无需逐个罗列子类型，同时保证类型安全。

步骤实现 #

1. 定义基础类型

先明确枚举、IBlock基类及子类型，再通过联合类型汇总所有子类型：

// BlockType枚举
enum BlockType {
  Text = 'text',
  Image = 'image',
  Video = 'video'
}

// IBlock基类
interface IBlock {
  type: BlockType;
  id: string;
}

// 各IBlock子类型
interface ITextBlock extends IBlock {
  type: BlockType.Text;
  content: string;
}

interface IImageBlock extends IBlock {
  type: BlockType.Image;
  url: string;
  alt: string;
}

interface IVideoBlock extends IBlock {
  type: BlockType.Video;
  videoUrl: string;
  duration: number;
}

// 所有IBlock子类型的联合类型
type AllBlocks = ITextBlock | IImageBlock | IVideoBlock;

2. 绑定组件与对应块类型

通过泛型和索引类型，让每个枚举值对应的组件，其props.data严格匹配对应子类型：

// 单个块组件的类型，泛型T约束为IBlock子类型
type BlockComponent<T extends IBlock> = React.FC<{ data: T }>;

// 映射类型：将BlockType枚举值映射到对应组件
type BlockComponentMap = {
  [K in BlockType]: BlockComponent<Extract<AllBlocks, { type: K }>>;
};

这里Extract<AllBlocks, { type: K }>的作用是：从AllBlocks联合类型中提取出type为当前枚举值K的子类型，确保组件数据类型精准匹配。

3. 编写映射函数

指定函数返回类型为BlockComponentMap的对应值，TS会自动做类型推断和校验：

// 示例组件实现
const TextBlock: BlockComponent<ITextBlock> = ({ data }) => {
  return <div>{data.content}</div>;
};

const ImageBlock: BlockComponent<IImageBlock> = ({ data }) => {
  return <img src={data.url} alt={data.alt} />;
};

const VideoBlock: BlockComponent<IVideoBlock> = ({ data }) => {
  return <video src={data.videoUrl} />;
};

// 映射函数
const getBlockComponent = (type: BlockType): BlockComponentMap[typeof type] => {
  const components: BlockComponentMap = {
    [BlockType.Text]: TextBlock,
    [BlockType.Image]: ImageBlock,
    [BlockType.Video]: VideoBlock
  };

  return components[type];
};

优势说明 #

• 类型安全：调用getBlockComponent返回的组件，其props.data会被TS自动推断为对应子类型，避免类型不匹配错误；
• 易维护：新增枚举值和子类型时，只需更新AllBlocks联合类型和组件映射对象，TS会自动检查类型一致性，无需手动修改返回类型；
• 避免any：彻底替代不安全的any类型，同时无需逐个罗列子类型。

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