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?

It doesn't work because state member is overridden in derived class and it gets inferred type of provided initial value — Aleksey L.
– Aleksey L., Commented Jan 24, 2019 at 13:53

maazadeeb · Accepted Answer · 2019-01-24 10:50:11Z

4

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.

answered Jan 24, 2019 at 10:50

maazadeeb

6,1122 gold badges32 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shevchenko Viktor · Accepted Answer · 2019-01-24 11:18:23Z

3

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

constructor(props) {
    super(props);

    this.state = {
        current: null;
    }
}

edited Jan 24, 2019 at 11:18

answered Jan 24, 2019 at 10:33

Shevchenko Viktor

5,4262 gold badges19 silver badges26 bronze badges

Collectives™ on Stack Overflow

object is possibly 'null' in typescript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related