Reactjs 处理Typescript中的可选字段

下面是我的React组件代码片段，其中一个字段是可选的。作为可选的，我必须初始化它

未定义的
，但这使得以后即使在类型检查之后也很难使用它。我不知道如何解决这个问题。我使用的是typescript版本3.2.2

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>);
  }
}

接口状态{
开放：布尔；
选择？：选择的字段类型；
}
类CFilter扩展了React.Component{
状态={
开：错，
选定：未定义
};
onOperatorValueChange=（值：任意）=>{
if（typeof this.state.selected！==未定义）{
console.log（this.state.selected.value）；//错误：对象可能未定义（属性）：selected未定义
这是我的国家({
选定：{
…this.state.selected，//错误：只能从对象类型创建排列类型
价值：价值
}
});
}
};
render（）{
返回（一些jsx）；
}
}

如果我没有初始化所选的
，
，它将抛出一个错误

所选属性不存在

我没有设置react，所以我无法测试它，但我猜您应该在初始化时将
state
的类型注释为
state
，如

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

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

尝试显式注释，看看它是否解决了问题。希望有帮助。祝你好运
 类型“null”不可分配给类型“SelectedFieldType | undefined”听起来很奇怪。。。也许您可以尝试添加一个只用于测试允许SelectedFieldType为null值的管道。但不得不这样做是很奇怪的

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
        }
      });
    }
  };

我已经测试过了，它似乎工作正常，没有错误
 尝试空值？默认状态未定义，如果在尝试后仍无法分配，则为null？类型“null”不可分配给类型“SelectedFieldType |未定义”：（还有一件事-
typeof this.state.selected
是一个字符串，因此应该对照引号
'undefined'
中的字符串文本检查它，而不是实际的
undefined
：
typeof this.state.selected！='undefined'