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