object is possibly 'null' in typescript

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

The code like this, but TS still tells me:

Even I tried:

And "!" also doesn't work

As you can see the "current" object can't be null because i have null check before i use it.

But typescript engine still show me that error.

I'm wondering is that because i initialized current object with null value, but ts can not figure out types from setState, so it takes current always null?

Answer 1

You'll need to assign a type to state, like

state: IRoleAddState = {
    current: null
};

Then, state will be of type IRoleAddState and not { current: null }. After that, the methods you tried will work.

Answer 2

Explicitly defining the state in a constructor should solve the issue.

constructor(props) {
    super(props);

    this.state = {
        current: null;
    }
}