Typescript 和反應條件渲染

Question

我是 typescript 的新手，並不是 FE 開發方面的專家。 我遇到了看起來很基本的問題，但我沒有找到任何解決方案。 也許我只是不知道如何正確地用谷歌搜索它。 在反應組件中，我有一個按鈕，在某些情況下被禁用，這會觸發組件的 function：

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作為參數傳遞。 我完全理解為什么 typescript 給我這個錯誤，問題是：處理這個錯誤的最佳方法是什么？

我找到了3種方法：

1）添加'if'守衛

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

它有效，但我不喜歡在每個 function 中添加這樣的保護，如果有人刪除disabled的邏輯，我想立即收到控制台錯誤告訴我，而不是讓它被默默吞下。 在我的項目中，我有很多依賴於渲染的此類代碼，我懷疑在任何地方添加此類檢查是否是最佳實踐。 也許我錯了。

2) 適用as現場操作員：

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

它有效，但看起來有點hacky。

3) as操作員身份申請整個 object 並將其傳遞給 function：

 <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);
    };

它有效，但看起來我沒有必要傳遞我可以從道具中獲取的 function 本身的值。 我不確定這樣做是否是最佳做法。

我確信應該有一些純粹的 typescript 解決方案，例如將 Props 類型定義為聯合或使用條件類型以及any和never的某種組合。 但我還沒想通。

這里是一個游樂場： 操場

Answer 1

您可以強制編譯假定值永遠不是null或undefined的! 操作員：

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

Answer 2

我認為根據您的要求

如果有人刪除了禁用的邏輯，我想立即收到控制台錯誤告訴我

有一個非常簡單的解決方案非常有意義，只需將您的onDeleteCompany類型從(companyId: number) => void更改為(companyId: number | null) => void ，然后 TypeScript 就會很高興。

它在語義上對您也有意義，因為您希望運行時在companyId為 null 時報告此錯誤。 然后您應該允許將帶有null的 companyId 作為參數傳入。