TypeScript允许参数类型错误的函数调用，如何编译阶段规避运行时错误？

首先明确问题场景：

• 存在函数：const verify = (address?: string) => void
• 两个组件Props类型：

  type VerifyButtonProps = { onClick: () => void; }
  type TButtonProps = { onClick?: React.MouseEventHandler<HTMLButtonElement>; children: React.ReactNode; };
  

点击按钮时出现运行时错误，但TypeScript编译未报错，核心原因是函数参数的兼容性规则导致的类型不匹配：
React的MouseEventHandler类型要求函数接收一个MouseEvent对象作为参数，但verify的参数是可选的string。TypeScript默认的宽松函数兼容性规则允许将verify赋值给onClick——因为它认为源函数可以忽略多余的参数，但运行时React会传入MouseEvent对象，若verify内部对address做了字符串相关操作，就会触发类型错误。

编译阶段避免错误的几种方法 #

• 显式包装事件处理函数
  最直接的方式是用箭头函数包装verify，明确不传递多余参数给它，确保参数类型匹配：

  <TButton onClick={() => verify()}>验证</TButton>
  

  这样React传入的MouseEvent会被箭头函数忽略，verify接收的是符合要求的undefined或指定的字符串参数。

• 开启严格函数类型检查
  在tsconfig.json中启用strictFunctionTypes选项（该选项默认包含在strict: true配置中）：

  {
    "compilerOptions": {
      "strictFunctionTypes": true
    }
  }
  

  开启后，TypeScript会严格检查函数参数的兼容性，直接将verify赋值给onClick会触发编译错误，强制你修正参数不匹配的问题。

• 调整组件Props的类型约束
  如果业务场景允许，可以修改TButtonProps的onClick类型，同时兼容无参数的函数：

  type TButtonProps = { 
    onClick?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | (() => void); 
    children: React.ReactNode; 
  };
  

  不过这种方式灵活性较低，更推荐前两种方案。

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