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

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可以为null。 但是我已经在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

由于它可以为null ，因此必须同时存在
当您致电{refItemIdx: this.state.deletedItem.itemIdx}
deletedItem可以为null然后javascript将引发错误，类似这样的内容can not read property itemIdx of null 。
typescript帮助您首先使用TS2531: Object is possibly 'null'.指出问题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)来检查是否有任何要删除的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,
};