如何为React TypeScript自定义hook指定带默认值的可选函数参数

问题原因 #

你只给了解构后的单个属性设置了默认值，没有给整个入参对象设置默认值。当你调用useMyHook()没有传入任何参数时，函数接收的入参本身是undefined，对undefined执行解构操作就会抛出读取属性失败的错误，和内部属性是否可选、有没有设置属性默认值无关。

修复方案 #

方案1（推荐）：给整个入参对象设置默认值 #

给hook的入参整体添加空对象作为默认值，这样就算调用时不传参数，解构的目标是有效空对象，会正常应用内部属性的默认值。
因为你当前的UseMyHookProps中onConnect是必填属性，需要同步调整默认参数或者接口定义：

// 调整1：修改接口，将onConnect也设为可选
interface UseMyHookProps {
  onConnect?: () => void;
  onUpdate?: () => void;
  onDisconnect?: () => {};
}

// 调整2：给整个入参对象设置默认值
const useMyHook = ({ 
  onConnect = () => {}, 
  onUpdate = () => {}, 
  onDisconnect = () => {} 
}: UseMyHookProps = {}) => {
  // 原有逻辑
  onUpdate();
};

如果希望保留onConnect为必填属性，可以直接给默认参数补齐必填项：

const useMyHook = ({ 
  onConnect = () => {}, 
  onUpdate = () => {}, 
  onDisconnect = () => {} 
}: UseMyHookProps = { onConnect: () => {} }) => {
  // 原有逻辑
};

方案2：调整调用方式 #

如果不修改hook定义，调用时传入空对象即可：

const MyComponent = () => {
  useMyHook({}); // 传入空对象而非完全不传参
  // 其他组件逻辑
};

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