对象在打字稿中可能是“空”

Question

 interface IRoleAddProps { roles: Array<IRole> } interface IRoleAddState { current: IRole | null } class RoleAdd extends React.Component<IRoleAddProps, IRoleAddState> { state = { current: null, } renderNoneSelect = () => { return ( <div styleName="empty"> <SvgIcon name="arrow" styleName="icon-arrow" /> <span>Empty</span> </div> ) } onRoleClick = (role: IRole) => { this.setState({ current: role, }) } render() { const { roles } = this.props const current = this.state.current return ( <div styleName="role-add"> <div styleName="role-list"> <div styleName="title">Select role:</div> <div styleName="list"> {roles.map(role => { const cls = classNames({ item: true, active: current && ( current.id === role.id ) }) return ( <div key={role.id} styleName={cls} className="g-text-inline" onClick={this.onRoleClick.bind(this, role)} > <CheckBox /> <span>{role.name}</span> </div> ) })} </div> </div> <div styleName="view"> {!current && this.renderNoneSelect()} {current && 'view'} </div> </div> ) } } export default RoleAdd 

这样的代码，但TS仍然告诉我：

甚至我试过：

并且“！” 也行不通

正如您所看到的，“当前”对象不能为null，因为我在使用它之前进行了空检查。

但打字稿引擎仍然显示我的错误。

我想知道是因为我用null值初始化了当前对象，但是ts无法从setState中找出类型，所以它需要当前的null吗？

Answer 1

在构造函数中明确定义状态应该可以解决问题。

constructor(props) {
    super(props);

    this.state = {
        current: null;
    }
}

Answer 2

您需要为state分配类型，例如

state: IRoleAddState = {
    current: null
};

然后，state将是IRoleAddState类型而不是{ current: null } 。 之后，您尝试的方法将起作用。