如何获取不同调用场景下传递给函数的Props类型？

步骤1：定义参数类型映射表 #

先把每个父组件类型对应的回调参数元组明确下来，让TypeScript关联类型与参数的对应关系：

// 映射每个调用方类型对应的回调参数元组
type SubmitParamsMap = {
  'component-one': [string, string]; // firstName, lastName
  'component-two': [string, string, string]; // firstName, lastName, email
  'component-three': [string, string, string, string]; // firstName, lastName, email, country
};

步骤2：重构ComponentTwo的Props与组件逻辑 #

用泛型绑定type属性和onSubmit的参数类型，确保两者严格匹配：

import React from 'react';

// 泛型Props：T限定为SubmitParamsMap的键，onSubmit参数对应映射表中的元组
type ComponentTwoProps<T extends keyof SubmitParamsMap> = {
  type: T;
  onSubmit: (...args: SubmitParamsMap[T]) => void;
};

const ComponentTwo = <T extends keyof SubmitParamsMap>({ type, onSubmit }: ComponentTwoProps<T>) => {
  const firstName = 'John';
  const lastName = 'Doe';
  const email = 'johndoe@gmail.com';
  const country = 'Germany';

  switch (type) {
    case 'component-one':
      onSubmit(firstName, lastName);
      break;
    case 'component-two':
      onSubmit(firstName, lastName, email);
      break;
    case 'component-three':
      onSubmit(firstName, lastName, email, country);
      break;
    default:
      // 类型守卫：确保没有遗漏的case，新增类型时会触发编译报错
      const _exhaustiveCheck: never = type;
      throw new Error(`不支持的组件类型：${_exhaustiveCheck}`);
  }

  return <div>ComponentTwo内容</div>;
};

export default ComponentTwo;

步骤3：父组件中使用类型明确的回调 #

传递type后，TypeScript会自动推导onSubmit的参数类型，无需手动声明：

import React from 'react';
import ComponentTwo from './ComponentTwo';

const ComponentOne: React.FC = () => {
  // 参数类型自动推导为[string, string]，对应firstName和lastName
  const onClickHandler = (firstName, lastName) => {
    // 直接使用类型明确的参数，无需额外类型断言
    console.log(`姓名：${firstName} ${lastName}`);
  };

  return <ComponentTwo type="component-one" onSubmit={onClickHandler} />;
};

export default ComponentOne;

核心优势 #

• 类型安全：父组件传递的onSubmit参数与type不匹配时，TypeScript会直接抛出编译错误
• 自动推导：父组件无需手动声明参数类型，TypeScript会根据type自动关联对应参数
• 可扩展性：新增父组件类型时，只需在SubmitParamsMap中添加新键值对并补充switch case，类型系统会自动校验完整性

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