TypeScript箭头函数参数类型提取：不修改调用方式的实现方法

问题解答：保留原参数调用方式的外部类型提取 #

完全可以做到提取类型到外部且不修改原调用方式，推荐两种方案：

方案1：定义函数类型别名

直接声明一个完整的函数类型，让setupFn关联该类型即可，参数无需重复标注：

// 外部定义函数类型
type SetupFn = (
  sdkToken: ITokenResponse["kycToken"],
  onDocSubmit: (data: any) => void,
  kycStatuses: IKYCStatuses,
  setKycStatuses: React.Dispatch<React.SetStateAction<IKYCStatuses>>,
  setModalClosed: React.Dispatch<React.SetStateAction<boolean>>,
  handleError: (e: any) => void,
) => void;

// 声明函数时直接关联类型，参数无需重复写类型
const setupFn: SetupFn = (
  sdkToken,
  onDocSubmit,
  kycStatuses,
  setKycStatuses,
  setModalClosed,
  handleError,
) => {
  // 函数逻辑
};

这种方式下，原调用代码完全不需要修改，依然可以使用：

setupFn(
  res.data?.kycToken,
  onDocSubmit,
  kycStatuses,
  setKycStatuses,
  setModalClosed,
  handleError,
);

方案2：定义参数元组类型

如果只需要提取参数的类型集合，可以用元组类型配合剩余参数解构语法：

// 外部定义参数元组类型
type SetupFnParams = [
  ITokenResponse["kycToken"],
  (data: any) => void,
  IKYCStatuses,
  React.Dispatch<React.SetStateAction<IKYCStatuses>>,
  React.Dispatch<React.SetStateAction<boolean>>,
  (e: any) => void
];

// 使用剩余参数解构关联元组类型
const setupFn = (...[sdkToken, onDocSubmit, kycStatuses, setKycStatuses, setModalClosed, handleError]: SetupFnParams) => {
  // 函数逻辑
};

同样，原调用方式保持不变。

理想的类型标注方式 #

结合可维护性和代码简洁度，推荐以下实践：

• 优先使用函数类型别名（方案1）：这种方式最直观，直接描述了函数的完整签名，类型定义与函数实现分离，便于后续修改或复用该函数类型，其他开发者也能快速理解函数的输入输出要求。
• 替换any类型：尽量为onDocSubmit的data和handleError的e定义具体类型，避免使用any，提升类型安全性和代码提示能力。例如：

  // 自定义文档提交数据类型
  interface IDocSubmitData {
    // 补充具体字段定义
  }
  // 自定义错误类型
  type KYCHandleError = Error | APIError;
  
  type SetupFn = (
    sdkToken: ITokenResponse["kycToken"],
    onDocSubmit: (data: IDocSubmitData) => void,
    kycStatuses: IKYCStatuses,
    setKycStatuses: React.Dispatch<React.SetStateAction<IKYCStatuses>>,
    setModalClosed: React.Dispatch<React.SetStateAction<boolean>>,
    handleError: (e: KYCHandleError) => void,
  ) => void;
  

• 按需使用元组类型：如果其他地方需要复用这套参数集合，再考虑方案2；否则函数类型别名的可读性更高。

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