Typescript And React Conditional Render

I am new to typescript and not an expert in FE development. I've encountered issue that seems pretty basic, but I failed to found any solution. Maybe I just don't know how to googl

Solution 1:

You can force the compile to assume a value is never null or undefined with the ! operator:

 handleDeleteCompany = () => {
        this.props.onDeleteCompany(this.props.company.id!);
    };

Solution 2:

I think based on your requirement

if someone removes disabled logic, I want to receive console error telling me about it immediately

There is a very simple solution that makes perfect sense, simply change your onDeleteCompany type from (companyId: number) => void to (companyId: number | null) => void, then TypeScript will be happy.

It also semantically make sense to you as you want the runtime report this error when companyId is null. Then you should allow companyId with null to be passed in as parameter.