Cannot invoke an object which is possibly 'undefined' on onClick

interface Alertprops {
    showAlert?: showAlertType,
    HideAlert?: () => void,
    onClick?: () => void,

}

interface Alertstate {
    alertMess?: string,
    showAlert?: boolean,
    alertType?: string,
    showReload?: boolean,
    

}

class Alert extends Component<Alertprops,Alertstate> {
    constructor(props:Alertprops) {
        super(props)

        this.state = {
            alertMess:'',
        }
    }

alertBox() {
        return (
            <div className="inner-box">
                {this.state.alertMess}
                <br/>
                {this.state.showReload ? (<a className="reload-link" onClick={()=>{window.location.reload()}}>Reload page</a>):(null)}
                <a onClick={()=>{this.props.HideAlert()}} className="close-alert">X</a>
            </div>
        )
    }

on onClick={()=>{this.props.HideAlert()}} I get error "Cannot invoke an object which is possibly ‘undefined’" what Im doing wrong? just started use TS.

>Solution :

hi if you pass function as props that can be undefined you can pass it like this

this.props.HideAlert?.()

this can just run only if you get it as props