枚举可以用作打字稿中的类型吗?

问题描述 投票:0回答:2

我曾经使用枚举作为类型,因为以下代码是有效的:

enum Test {
    A,
    B,
}
let a: Test = Test.A

但是,当我使用它作为 React 状态的类型时,IDE 会抛出错误:类型 FetchState 无法分配给类型 SetStateAction

这是我所做的:

const [ state, setState ]: [ FetchState, React.Dispatch<FetchState> ] = useState(FetchState.NULL)

我想确定是我的理解有误还是代码有问题。

reactjs typescript types enums
2个回答
5
投票

如果

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 推断它。我不知道为什么会这样,但据我所知,永远不需要在元组上提供类型注释,这是学术性的。


-1
投票

您必须在 useState 中设置泛型类型,如下所示:

const [ state, setState ]: [ FetchState, React.Dispatch<FetchState> ] = useState<FetchState>(FetchState.NULL)

工作示例此处

© www.soinside.com 2019 - 2024. All rights reserved.