Question

我在React项目中使用typescript。我在typescript中有以下代码：

if(this.state.deletedItem !== null) {
                this.props.deleteItem({refItemIdx: this.state.deletedItem.itemIdx});
              }

tslint给我TS2531: Object is possibly 'null'.对象一个错误this.state.deletedItem.itemIdx。它说this.state.deletedItem可以为空。但是我已经在if条件下检查了它，为什么它仍然报告这样的错误？

下面是类型定义：

interface State {
  deletedItem: ItemDiscountTranItem | null;
}

export class MainView extends React.Component<Props, State> {

  state = {
    deletedItem: null,
  };
  ...

我尝试如下更新代码，但仍然收到错误：

         if(this.state.deletedItem) {
            this.props.voidItemDiscount({refItemIdx: this.state.deletedItem ? this.state.deletedItem.itemIdx : 0});
          }

我尝试使用以下语法，但仍然收到相同的错误：

this.props.voidItemDiscount({refItemIdx: this.state.deletedItem && this.state.deletedItem.itemIdx});

Answer 1

interface State {
  deletedItem: ItemDiscountTranItem | null;
}

此行表示：
+ deletedItem 必须进入State
+ deletedItem可以为空

因为它可能是null，并且必须同时存在
当您致电{refItemIdx: this.state.deletedItem.itemIdx}
deletedItem可能是null，然后javascript会引发错误，类似这样的can not read property itemIdx of null。
typescript帮助您首先使用TS2531: Object is possibly 'null'.指出该问题，以防止进一步的错误。

所以您应该这样声明接口：

interface State {
  deletedItem?: ItemDiscountTranItem;
}

{refItemIdx: this.state.deletedItem && this.state.deletedItem.itemIdx}

这表明：
+您在界面中可以或可以使用deletedItem
+并且deletedItem是ItemDiscountTranItem的类型
然后，您可以通过检查this.state.deletedItem是否存在来获取值，然后从中获取itemIdx。

====================
这只是我的想法，如果您考虑使用它，那就太好了。

也就是说，在您的情况下，我通常会让variables或与global context或application state相关的事物为State
设置为默认值，并尽可能减少 null和undefined。
您可以这样声明自己的状态
deletedItems: ItemDiscountTranItem[]，
该声明没有任何危害，实际上，它可以帮助您的代码更具可读性和可扩展性，

例如：只需if(state.deletedItems.length)，您就可以检查是否有任何要删除的内容
您甚至可以进一步循环抛出deletedItems.forEach的列表
接下来是什么？您甚至不必为何时应该null而费解undefined？还是我什么时候应该检查？？
因为现在很简单，所以您想delete吗？您检查是否有要删除的内容，是否想delete more？你循环。 simple enough。

Answer 2

关于我的代码的问题是我将组件类声明为class MainView extends React.Component<Props, State>。这里的State仅指示组件状态从此类扩展。因此，下面定义的组件状态具有State的狭窄类型null。

state = {
   deletedItem: null,
};

以下更改解决了我的问题：

state: State = {
   deletedItem: null,
};

为什么“ tslint”会报告“ TS2531：对象可能为“ null”。即使在使用前我也对其进行了检查？

2 个答案: