如何修复“对象可能未定义”以及为什么会出现此错误？答案

【问题标题】：How to fix 'object is possibly undefined' and why do I get this error at all?如何修复“对象可能未定义”以及为什么会出现此错误？
【发布时间】：2022-01-30 21:34:26
【问题描述】：

所以 Typescript 强调 this.ratesMap.get(rate[0]) 并告诉它可能未定义。添加！解决了问题，我不再收到错误但代码不起作用，输出为空，终端和控制台中没有其他错误。

为什么 typescript 下划线 this.ratesMap.get(rate[0]) 而不是 this.ratesMap.has(rate[0])？我该如何解决这个问题？

export class CardStore implements ICardStore {
  public lastRates: ICard[] = [];

  @observable
  public cardsArray: CurrencyCard[] = []

  @observable
  private ratesMap: Map<string, CurrencyCard> = new Map<string, CurrencyCard>();
  
  public constructor(@inject(CardApi) private api: CardApi) {
    makeObservable(this);
    this.getRates();
    this.updateRate();
  }

  @computed
  public get recentRates(): CurrencyCard[] {
    return this.cardsArray = [...this.ratesMap.values()]
  }

  private async getRates() {
    const rates = await this.api.loadRates();
    runInAction(() => {
      Object.entries(rates).forEach((rate) => {
        if (this.ratesMap.has(rate[0])) {
          this.ratesMap.get(rate[0]).update(rate[1]);
        } else {
          let newCard = new CurrencyCard(rate[0], rate[1]);
          this.ratesMap.set(rate[0], newCard);
        }
      });    
    });
  }

loadrates() 来自上面的代码：

        public async loadRates(): Promise<Record<string, number>> {
            return await fetch(
                `https://freecurrencyapi.net/api/v2/latest?apikey=MYAPIKEY&base_currency=USD`
            )
            .then(response => response.json())
            .then(data => (data.data)); 
            }
}

【问题讨论】：

您需要在使用前检查它是否未定义。例如，使用 if 条件。这些类型的警告非常棒，因为它们提醒您，如果对象由于某种原因未定义，您的代码可能会中断。
如果rates[0]不是ratesMap，它可以是undefined

标签： javascript typescript undefined fetch-api

【解决方案1】：

Map 的get 方法的返回值可以是undefined（如果映射没有该键的条目）。 TypeScript 不知道您已经通过 has 调用来防范这种情况。

相反，不要使用has（无论如何，使用has+get 通常是一种反模式[一个几乎无害的模式?]，它会强制遍历地图两次）。获取卡并检查是否有：

private async getRates() {
  const rates = await this.api.loadRates();
  runInAction(() => {
    Object.entries(rates).forEach((rate) => {
      const card = this.ratesMap.get(rate[0]);  // ***
      if (card) {                               // ***
        card.update(rate[1]);                   // ***
      } else {
        let newCard = new CurrencyCard(rate[0], rate[1]);
        this.ratesMap.set(rate[0], newCard);
      }
    });    
  });
}

TypeScript 将能够基于if (card) 缩小card 的类型，因此它会知道card 不是undefined 在if 的正文中，并允许您在update 上使用它。

【讨论】：