包含枚举值的设置状态的接口引发错误

Question

正在尝试运行以下命令：

type Mode = 'signup' | 'signin' | 'forgot-password';

interface IProps {}

interface IState {
  mode: Mode;
}

class SigninSignupModal extends React.Component<IProps, IState> {
  state = {
    mode: 'signup',
  };
}

抛出以下错误：

Type 'string' is not assignable to type 'Mode'. ts(2416)

为什么会这样呢？

例如，这是非常好的：

type Mode = 'signup' | 'signin' | 'forgot-password';

let mode: Mode = 'signup';

而且，这也很好：

class SigninSignupModal extends React.Component<IProps, IState> {
  construct() {
    this.state = {
      mode: 'signup',
    };
  }
}

Answer 1

我猜您必须显式地将您的string类型转换为Mode类型：

this.state = {
  mode: 'signup' as Mode,
};

或

    this.state = {
      mode: <Mode>'signup',
    };

有关更多信息，请滚动到“类型断言”：https://www.typescriptlang.org/docs/handbook/basic-types.html