React+TypeScript自定义Hook返回展开对象类型报错问题

问题原因 #

直接用带索引签名的IState作为参数类型时，TypeScript只能识别它是「任意string键对应string值」的对象，无法捕获调用时传入的具体键名（比如name）。当返回{ reset, ...state }时，TS无法正确推断展开后state的具体属性，因此认为返回类型仅包含reset函数，导致解构具体属性时报错。

解决方案 #

改用泛型约束，既保证对象值为string类型，又保留传入参数的具体键结构：

修改后的自定义Hook代码 #

import { useState } from 'react';

// 泛型T约束：必须是键为string、值为string的对象
const useForm = <T extends Record<string, string>>(initialState: T) => {
  const [state, setState] = useState<T>(initialState);
  // 修正原代码笔误：setFormState -> setState
  const reset = () => setState(initialState);
  // 让TS精确推断返回类型，也可显式指定为 T & { reset: () => void }
  return { reset, ...state } as const;
};

调用代码（无报错） #

const { name, reset } = useForm({
  name: 'hello',
});

原理说明 #

• 泛型T会捕获调用时传入的具体对象类型（比如{ name: string }），而非模糊的索引签名类型。
• 返回类型被推断为T & { reset: () => void }，即同时包含T的所有属性和reset函数，TypeScript能准确识别解构出的name等属性。

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