使用 Typescript 在 React 中作为状态的两个字符串之一

Posted 2023-03-13

【中文标题】使用 Typescript 在 React 中作为状态的两个字符串之一

【英文标题】：One of two strings as state in React with Typescript

【发布时间】：2019-04-03 14:24:32

【问题描述】：

我有一个如下所示的组件：

export interface Props 
  // ... some props


export interface State 
  readonly mode: "add" | "delete"


export class MyComponent extends Component<Props, State> 
  readonly state =  mode: "add" 
  // ... more component code

问题是这会引发 linting 错误：

Property 'state' in type 'ScannerScreen' is not assignable to the same property in base type 'Component<Props, State, any>'.
  Type ' mode: string; ' is not assignable to type 'Readonly<State>'.
    Types of property 'mode' are incompatible.
      Type 'string' is not assignable to type '"add" | "delete"'.

为什么 TypeScript 无法识别 "add" 或 "delete" 是字符串，或者 "add" 是 mode 允许的类型之一？

【参考方案1】：

state 已在基本组件中定义（如错误所述）。

从 typedef 定义如下：

state: Readonly<S>;

试试

export interface Props 
  // ... some props


export interface State 
  readonly mode: "add" | "delete"


export class MyComponent extends Component<Props, State> 
  // VSCode will have intellisense for this ...
  this.state =  mode: "add" ;
  // ... more component code

如果您使用的是 VSCode，它甚至会在代码提示中包含正确的值。

【参考方案2】：

这是由于类型推断——TypeScript 将'add' 推断为string 而不是'add' 类型。您可以通过以下方式轻松解决此问题：mode: "add" as "add"。您还可以对状态使用类型注释：readonly state: State = mode: "add" 。