我曾经使用枚举作为类型,因为以下代码是有效的:
enum Test {
A,
B,
}
let a: Test = Test.A
但是,当我使用它作为 React 状态的类型时,IDE 会抛出错误:类型 FetchState 无法分配给类型 SetStateAction
这是我所做的:
const [ state, setState ]: [ FetchState, React.Dispatch<FetchState> ] = useState(FetchState.NULL)
我想确定是我的理解有误还是代码有问题。
如果
FetchState
是 enum
并且 FetchState.NULL
是该 enum
的有效成员,则正确的方法很简单:
const [state, setState] = useState(FetchState.NULL);
元组上不需要显式类型注释。
您还可以提供类型参数,但在这种情况下没有必要:
const [state, setState] = useState<FetchState>(FetchState.NULL);
但很多时候你不需要显式提供该类型参数; TypeScript 会根据初始值的类型推断它,如上面所示。但在某些情况下,您可能需要显式告诉 TypeScript 状态成员的类型是什么(通常是因为您使用的是联合类型)。在这种情况下,您需要包含类型参数:
const [example, setExample] = useState<string | null>(null);
我必须在那里使用类型参数,以便 TypeScript 知道
string
是 example
的有效值,而不仅仅是 null
。
我很好奇提供元组的类型。通过推断得到的类型是
[FetchState, React.Dispatch<React.SetStateAction<FetchState>>]
(请注意,这与您问题中的类型不太一样)。但有趣的是,如果您显式提供该类型,您 also 也必须显式向 useState
提供类型参数,您不能让 TypeScript 推断它。我不知道为什么会这样,但据我所知,永远不需要在元组上提供类型注释,这是学术性的。
您必须在 useState 中设置泛型类型,如下所示:
const [ state, setState ]: [ FetchState, React.Dispatch<FetchState> ] = useState<FetchState>(FetchState.NULL)
工作示例此处