如何基于React函数式组件的额外属性推断TypeScript类型？

要实现openModal返回类型的自动推断，我们可以通过泛型接口约束Modal组件，结合TypeScript的类型推断能力从传入的React元素中提取结果类型，无需依赖显式的resultType属性（用符号或内部标记避免命名污染）。

步骤1：定义带返回类型关联的Modal接口 #

创建泛型接口，将Modal组件与它的返回结果类型绑定：

import React from 'react';

// 用唯一Symbol作为内部标记，避免污染组件公开属性
const MODAL_RESULT_MARKER = Symbol.for('modalResultType');

interface ModalWithResult<T> extends React.FC {
  [MODAL_RESULT_MARKER]: T;
}

步骤2：声明带结果类型的Modal组件 #

创建Modal时，通过类型标注指定对应的返回结果类型：

// 对应布尔结果的Modal
const SomeModal: ModalWithResult<boolean> = () => <div>布尔结果弹窗</div>;

// 对应字符串结果的Modal
const SomeOtherModal: ModalWithResult<string> = () => <div>字符串结果弹窗</div>;

步骤3：实现自动类型推断的openModal函数 #

利用TypeScript的infer关键字和泛型约束，从传入的React元素中自动提取Modal的返回类型：

// 工具类型：从React元素中提取Modal的结果类型
type ExtractModalResult<E> = E extends React.ReactElement<ModalWithResult<infer T>> 
  ? T 
  : never;

function openModal<E extends React.ReactElement<ModalWithResult<any>>>(
  element: E
): ExtractModalResult<E> {
  // 这里写入你的弹窗业务逻辑（如渲染弹窗、处理关闭返回值等）
  // 类型层面已自动推断返回值类型，实际返回需匹配业务逻辑
  return {} as ExtractModalResult<E>;
}

验证类型推断效果 #

现在变量类型会被自动推导，无需手动指定：

let someResult = openModal(<SomeModal />);
// someResult 类型自动推断为 boolean

let someOtherResult = openModal(<SomeOtherModal />);
// someOtherResult 类型自动推断为 string

简化方案：用工厂函数创建Modal #

如果觉得手动标注类型繁琐，可以用工厂函数封装Modal创建逻辑：

function createModal<T>(component: React.FC): ModalWithResult<T> {
  return component as ModalWithResult<T>;
}

// 创建Modal更简洁
const NumberModal = createModal<number>(() => <div>数字结果弹窗</div>);

let numberResult = openModal(<NumberModal />);
// numberResult 类型自动推断为 number

核心逻辑说明 #

• 用Symbol作为内部标记，既满足“无需依赖resultType”的需求，又避免与组件其他属性冲突。
• 泛型约束+infer关键字让TypeScript自动从传入的React元素中提取结果类型，完全适配大量不同类型Modal的场景。
• 整个类型推断过程完全自动化，不需要手动为openModal指定泛型参数。

内容的提问来源于stack exchange，提问作者Arno van Oordt