Question

以下是我的React Component代码片段，其中一个字段是可选的。由于是可选的，因此我必须对其进行初始化interface State { open: boolean; selected?: SelectedFieldType; } class CFilter extends React.Component<Props, State> { state = { open: false, selected: undefined }; onOperatorValueChange = (value: any) => { if (typeof this.state.selected !== undefined) { console.log(this.state.selected.value); // ERROR: Object is possibly undefined (property): selected undefined this.setState({ selected: { ...this.state.selected, // ERROR: Spread types may only be created from object types value: value } }); } }; render() { return (<span>some jsx</span>); } }，但这使以后即使在类型检查之后也很难使用它。我不确定该如何解决。我使用的打字稿版本为3.2.2。

selected

如果我不初始化{{1}}，它将抛出一个错误

所选属性不存在

Answer 1

我没有设置响应程序，因此无法测试，但是我的猜测是，当您将state的类型注释为State时，初始化它，就像

  // note the annotation
  state: State = {
    open: false,
    selected: undefined
  };

而不是让编译器推断类型。编译器很可能认为CFilter['state']比State窄（CFilter extends React.Component<Props, State>意味着state可以是扩展 {{1} }。），而State总是 CFilter['state']['selected']。如果是这样，那么undefined将始终被认为是this.state.selected，并且不可能通过空检查来更改（不幸的是，错误消息抱怨它认为“可能”未定义）必需未定义，但是就是这样。）

尝试使用显式注释，看看它是否可以解决问题。希望能有所帮助。祝你好运！

Answer 2

类型'null'不能分配给类型'SelectedFieldType | undefined'听起来很奇怪...也许您可以尝试仅添加一个用于测试允许null值添加到SelectedFieldType的管道。但是必须这样做很奇怪。

interface State {
  open: boolean;
  selected?: SelectedFieldType | null;
}

@jcalz的观察结果也非常好。您应该尝试一下。

如果它不起作用，您可以尝试将代码重新编写为类似的内容：

class CFilter extends React.Component {
  state: State = {
    open: false,
    selected: null,
  };

  onOperatorValueChange = (value: any) => {
    if (this.state.selected) {
      this.setState({
        selected: { 
          ...this.state.selected,
          value
        }
      });
    }
  };

我已经测试过on this stackblitz，并且看来工作正常，没有错误。

处理打字稿中的可选字段

2 个答案: