React+TypeScript如何为useContext自定义Hook正确配置类型

问题根源 #

你遇到的报错来自两个问题叠加：

1. TypeScript 数组类型推断规则问题：你在自定义Hook中返回[isOffline, setIsOffline]时，TS默认会将该值推断为(boolean | React.Dispatch<React.SetStateAction<boolean>>)[]类型的可变数组，而非固定顺序、固定类型的元组。TS会认为数组中每一个元素都可能是布尔值或状态更新函数，所以哪怕你按位置取元素，也会得到联合类型的校验提示。
2. 解构位置错误：你返回的数组第一个元素是布尔类型的isOffline状态值，第二个才是更新函数，但你调用Hook时直接把第一个元素赋值给了setIsOffline变量，本质上你拿到的本来就是布尔值，当然无法调用。

修复方案 #

步骤1：修正自定义Hook返回值类型 #

你可以选择以下任意一种方式给返回值添加类型约束，让TS识别为固定类型的元组：

• 方式1：显式声明Hook返回类型

// 明确指定返回值是[boolean, 状态更新函数]的元组
export const useOfflineContext = (): [boolean, React.Dispatch<React.SetStateAction<boolean>>] => {
  const isOffline = React.useContext(OfflineContext);
  const setIsOffline = React.useContext(OfflineSetContext);

  if (!setIsOffline) {
    throw new Error('The OfflineProvider is missing.');
  }
  return [isOffline, setIsOffline];
};

• 方式2：对返回数组添加as const断言

export const useOfflineContext = () => {
  const isOffline = React.useContext(OfflineContext);
  const setIsOffline = React.useContext(OfflineSetContext);

  if (!setIsOffline) {
    throw new Error('The OfflineProvider is missing.');
  }
  // as const会将数组推断为只读元组，自动保留位置对应的类型
  return [isOffline, setIsOffline] as const;
};

步骤2：修正Hook调用时的解构逻辑 #

如果需要同时用到状态和更新函数，按位置正常解构即可：

const [isOffline, setIsOffline] = useOfflineContext();

如果只需要用到更新函数，用逗号跳过第一个元素即可：

const [, setIsOffline] = useOfflineContext();

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