Entonces Typescript subraya this.ratesMap.get(rate[0]) y dice que probablemente no esté definido. Agregando! resuelve el problema, ya no aparece el error, pero el código simplemente no funciona, la salida está vacía y no hay otros errores en la terminal ni en la consola.
¿Por qué mecanografiado subraya this.ratesMap.get(rate[0]) y no this.ratesMap.has(rate[0]) ? ¿Cómo puedo arreglar esto?
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() del código anterior está aquí:
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)); } }El valor de retorno del método get de Map puede no estar undefined (si el mapa no tiene una entrada para esa clave). TypeScript no sabe que te has protegido contra eso con una llamada has .
En su lugar, no use has (hacer has + get es generalmente un antipatrón de todos modos [uno en su mayoría inofensivo 🙂], obliga a atravesar el mapa dos veces). Consigue la tarjeta y comprueba si tienes una:
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 podrá restringir el tipo de card en función de if (card) , por lo que sabrá que la card no está undefined en el cuerpo del if y le permitirá usar la update en ella.