React TypeScript自定义Hook返回值类型的条件化配置问题

直接上修改后的完整代码：

interface MyHookProps<T, TF> {
  transform?: (data: T) => TF
}

const myHook = <T, TF = never>(props?: MyHookProps<T, TF>) => {
  // 根据是否传入transform动态确定data类型
  type Data = TF extends never ? T : TF;
  const [items, setItems] = useState<Data>([] as Data);

  return { data: items };
};

核心调整点 #

• 把泛型TF的默认值设为never：没传transform时，TF保持默认的never，通过条件类型自动匹配T作为最终类型。
• 用条件类型Data统一类型：确保state变量items和返回的data类型完全一致，避免类型不匹配问题。
• 初始值类型断言：空数组默认会被推断为never[]，用[] as Data手动指定类型，消除类型报错。

验证示例 #

未传入transform的情况

interface User {
  name: string;
  age: number;
}

const { data } = myHook<User[]>();
// data类型自动推导为User[]，符合预期

传入transform的情况

const { data } = myHook<User[]>({
  transform: (data) => data.map(d => ({ ...d, another: 1 }))
});
// data类型自动推导为{ name: string; age: number; another: number; }[]，符合预期

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