Question

我是打字稿新手，不是有限元开发专家。我遇到了看起来很基本的问题，但是找不到任何解决方案。也许我只是不知道如何正确搜索它。在react component中，我有一个在某些情况下被禁用的按钮，它会触发组件的功能：

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）添加“如果”后卫

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

它可以工作，但是我不喜欢在每个函数中添加这样的防护的想法，如果有人删除了disabled逻辑，我想立即收到控制台错误告诉我，而不是默默地告诉我。吞咽了。在我的项目中，我有很多这样的代码依赖于render，我怀疑在所有地方都添加这样的检查是一种最佳实践。也许我错了。

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中获取的值。我不确定这样做是不是最佳实践。

我确信应该有一些纯净的打字稿解决方案，例如将Props类型定义为联合或使用条件类型以及any和never的某种组合。但是我还没有弄清楚。

这是一个游乐场： playground

Answer 1

您可以使用`products?id=${cartItemsIds.join('&id=')}`运算符强制编译器假定值永远不会为null或undefined：

Answer 2

我认为是根据您的要求

如果有人删除禁用的逻辑，我想立即收到控制台错误，告诉我有关此问题

有一个非常简单的解决方案很有意义，只需将onDeleteCompany的类型从(companyId: number) => void更改为(companyId: number | null) => void，TypeScript就会很高兴。

当您希望companyId为null时，运行时报告此错误时，这在语义上也对您有意义。然后，您应允许将带有null的companyId作为参数传递。

打字稿并响应条件渲染

2 个答案: