为什么`tslint`报告`TS2531：对象可能是'null'。'即使我在使用前检查过它？

Question

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

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

tslint 在对象 this.state.deletedItem.itemIdx 上给我一个错误 TS2531: Object is possibly 'null'.。它说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,
};