要包装来自React useState钩子的setValue调用并保持相同的类型签名,可以使用泛型和函数重载的方式来实现。
首先,我们可以定义一个泛型函数,该函数接受一个初始值和一个setValue函数作为参数,并返回一个新的setValue函数。这个新的setValue函数会在调用时对传入的值进行类型检查,并调用原始的setValue函数。
以下是一个示例代码:
import { useState } from 'react';
// 定义泛型函数
function useTypedState<T>(initialValue: T): [T, (value: T) => void] {
const [state, setState] = useState<T>(initialValue);
// 定义重载函数
function setValue(value: T): void;
function setValue(value: (prevState: T) => T): void;
function setValue(value: T | ((prevState: T) => T)): void {
if (typeof value === 'function') {
setState((prevState: T) => value(prevState));
} else {
setState(value);
}
}
return [state, setValue];
}
// 使用示例
const [count, setCount] = useTypedState<number>(0);
setCount(10); // 正确的调用方式,参数类型为number
setCount((prevCount) => prevCount + 1); // 正确的调用方式,参数类型为(prevState: number) => number
setCount('abc'); // 错误的调用方式,参数类型不匹配
在上述示例中,我们定义了一个名为useTypedState
的泛型函数,它接受一个初始值,并返回一个包含状态值和类型安全的setValue函数的元组。在setValue函数中,我们使用了函数重载来支持两种不同的调用方式:直接传入新的值或传入一个函数来更新状态。
这样,我们就可以在使用useState钩子时,通过调用useTypedState
来包装setValue函数,以保持相同的类型签名,并且可以在调用时进行类型检查。
请注意,上述示例中的代码是使用TypeScript编写的,如果你使用的是JavaScript,可以将类型注解去除,并将泛型相关的代码删除,仅保留函数重载部分的实现即可。
领取专属 10元无门槛券
手把手带您无忧上云