Одна из двух строк как состояние в React с 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
}

Проблема в том, что выдает ошибку 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" является одним из разрешенных типов для режима?

Answer 1

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

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

state: Readonly<S>;

1006 * * * Попробуйте 1007 *

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

Answer 2

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