CODEWITHSUNDEEP
javascripttypescriptundefinedfetch-api
lusidespair
lusidespair

Reputation: 1

How to fix 'object is possibly undefined' and why do I get this error at all?

So Typescript underlines this.ratesMap.get(rate[0]) and tells it's probably undefined. Adding ! solves the problem, I don't get the error anymore but the code just won't work, the output is empty and there's no other errors in the terminal and in the console.

Why typescript underlines this.ratesMap.get(rate[0]) and not this.ratesMap.has(rate[0])? How can I fix this?

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() from the code above is here:

        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)); 
            }
}

Upvotes: 0

Views: 1077

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075317

The return value of the get method of Map can be undefined (if the map doesn't have an entry for that key). TypeScript doesn't know that you've guarded against that with a has call.

Instead, don't use has (doing has+get is generally an antipattern anyway [a mostly harmless one 🙂], it forces traversal of the map twice). Get the card and check if you got one:

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 will be able to narrow the type of card based on if (card), so it will know card is not undefined in the body of the if and will let you use update on it.

Upvotes: 1

Related Questions