TypeScript中React自定义hook如何指定useState的F类型空初始值？

要让useGetFromStore返回纯粹的F类型而非F | undefined，可行的核心思路是让调用者传入对应F类型的“空”值作为useState的初始值——因为不同类型的“空”定义没有统一标准（比如数组用[]、字符串用''、自定义对象需要符合类型结构的空实例），无法通过泛型自动推导通用的空值。

修改后的hook代码 #

export function useGetFromStore<T, F>(
    store: (callback: (state: T) => unknown) => unknown,
    callback: (state: T) => F,
    initialEmptyValue: F // 新增参数：传入F类型的空值
) {
    const result = store(callback) as F;
    // 使用传入的空值作为useState初始值，确保state类型始终为F
    const [state, setState] = useState<F>(initialEmptyValue);

    useEffect(() => {
        setState(result);
    }, [result])

    return state;
}

调用示例 #

根据不同的F类型传入对应的空值：

// 数组类型：空值传[]
const list = useGetFromStore(store, (state) => state.todoList, []);

// 字符串类型：空值传''
const username = useGetFromStore(store, (state) => state.user.name, '');

// 自定义对象类型：传入符合类型结构的空实例
type User = { name: string; age: number };
const emptyUser: User = { name: '', age: 0 };
const user = useGetFromStore(store, (state) => state.user, emptyUser);

补充说明 #

如果你的store是类似Zustand、Redux Toolkit这类支持组件内订阅的状态库，原hook的写法可以进一步优化——直接利用状态库的订阅能力，不需要额外用useState和useEffect，比如Zustand的useStore本身就会返回正确的类型，不会出现undefined：

// 以Zustand为例的简洁写法
export function useGetFromStore<T, F>(
    store: (callback: (state: T) => F) => F, // 修正store的类型定义
    callback: (state: T) => F
) {
    return store(callback);
}

但如果必须保留原有的useState+useEffect逻辑，那通过调用者传入初始空值的方案就是最稳妥的。

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