One of two strings as state in React with Typescript

Question

У меня есть компонент, который выглядит так:

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
}

The problem is this throws the linting error:

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"'.

Why does TypeScript not recognize that "add" или же "delete" are strings or that "add" is one of the allowed types for mode?

Answer 1

Это связано с выводом типа - TypeScript выведет 'add' как string а не тип 'add', Вы можете легко это исправить, выполнив: mode: "add" as "add", Вы также можете использовать тип аннотации для состояния: readonly state: State = { mode: "add" },

Answer 2

state уже определен в базовом компоненте (как упоминается в ошибке).

Из typedefs это определяется следующим образом:

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, у него даже будут правильные значения в подсказках кода.