Машинопись и реакция условного рендера

Question

Я новичок в машинописи и не эксперт в разработке FE. Я столкнулся с проблемой, которая кажется довольно простой c, но я не смог найти никакого решения. Может быть, я просто не знаю, как правильно погуглить. В компоненте «Реакция» у меня есть кнопка, которая отключена при некотором условии, которая вызывает функцию компонента:

import React, {Component} from 'react';

type DraftCompany = {
    id: null
    name: string,
};

type Company = Omit<DraftCompany, 'id'> & {
    id: number;
};

type Props = {
    company: Company | DraftCompany,
    onDeleteCompany: (companyId: number) => void,
}

class CompanyRow extends Component <Props> {
    handleDeleteCompany = () => {
        this.props.onDeleteCompany(this.props.company.id);
    };

    render = () => {
        return (
            <div>
                <div>{this.props.company.name}</div>
                <div>
                    <button disabled={this.props.company.id === null} onClick={this.handleDeleteCompany}/>
                </div>
            </div>
        )
    }
}

export default CompanyRow;

При вызове this.props.onDeleteCompany(this.props.company.id); я получаю ошибку машинописного текста, которая говорит, что есть шанс, что я передам null в качестве параметра. Я полностью понимаю, почему машинопись выдает мне эту ошибку, вопрос: Как лучше всего справиться с этой ошибкой?

Я нашел 3 способа:

1) Добавить 'if' guard

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

Это работает, но мне не нравится идея добавления таких защитников в каждую функцию, если кто-то удаляет disabled logi c, я хочу получить консольная ошибка, сообщающая мне об этом немедленно, чтобы она не была тихо проглочена. В моем проекте много такого кода, который зависит от рендера, я сомневаюсь, что лучше добавлять такие проверки везде. Может я не прав.

2) Применить as к полевому оператору:

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

Это работает, но выглядит несколько странно.

3) Примените оператор as ко всему объекту и передайте его функции:

 <button disabled={this.props.company.id === null} 
         onClick={() => this.handleDeleteCompany(this.props.company as Company)}/>

 handleDeleteCompany = (company: Company) => {
        this.props.onDeleteCompany(company.id as number);
    };

Это работает, но, похоже, мне не нужно передавать значение, которое я мог иметь схватил саму функцию из реквизита. Я не уверен, что это лучше всего делать.

Я уверен, что должно быть какое-то чистое решение для машинописи, например, определение типа Props как объединения или использование условных типов с некоторой комбинацией any и * 1032. *. Но я не разобрался.

Вот детская площадка: детская площадка

Answer 1

Я думаю, исходя из ваших требований

, если кто-то удаляет отключенные логи c, я хочу получить сообщение об ошибке консоли, сообщающее мне об этом немедленно

Существует очень простое решение, которое имеет смысл, просто измените тип onDeleteCompany с (companyId: number) => void на (companyId: number | null) => void, тогда TypeScript будет счастлив.

Это также семантически имеет смысл для вас, так как вы хотите, чтобы отчет во время выполнения этого ошибка, когда companyId равен нулю. Затем следует разрешить передачу companyId с null в качестве параметра.

Answer 2

Вы можете заставить компиляцию предполагать, что значение никогда не будет null или undefined с помощью оператора !:

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