Блог

У меня ошибка с форматированием этих данных API, странная часть заключается в том, что консоль регистрирует ответ, который я хочу, а формат — number .

Кто-нибудь знает, почему typescript не принимает это и что может быть причиной этой проблемы?

Код

 import React, { useEffect, useState } from 'react';
import api from '../../services';

import { CardsList, Value } from './styles';

interface ContractProps {
  data: {
    dataCards: {
      billing: {
        monthlyBilling: number;
      };
    }
  }
}

const Cards: React.FC = () => {
  const [contract, setContract] = useState<ContractProps>();
  const monthlyBillingData = contract?.data.dataCards.billing.monthlyBilling;
  
  useEffect(() => {
    api.get('').then(response => {
      setContract(response.data);
    });
  }, []);
  
  console.log(monthlyBillingData);
  console.log(typeof(monthlyBillingData));
  console.log(new Intl.NumberFormat().format(monthlyBillingData));

  return (
      <CardsList>
          <h3>Ativos</h3>
          <Value>
            <strong>R$ {contract?.data.dataCards.billing.monthlyBilling}</strong>
          </Value>
      </CardsList>
  );
};

export default Cards;
  

Ошибка

 No overload matches this call.
  Overload 1 of 2, '(value: number | bigint): string', gave the following error.
    Argument of type 'number | undefined' is not assignable to parameter of type 'number | bigint'.
      Type 'undefined' is not assignable to type 'number | bigint'.
  Overload 2 of 2, '(value: number): string', gave the following error.
    Argument of type 'number | undefined' is not assignable to parameter of type 'number'.
      Type 'undefined' is not assignable to type 'number'.  TS2769

    28 |   console.log(monthlyBillingData);
    29 |   console.log(typeof(monthlyBillingData));
  > 30 |   console.log(new Intl.NumberFormat().format(monthlyBillingData));
       |                                              ^
    31 | 
    32 | 
    33 |   return (
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.tsx:28 100000
index.tsx:29 number
index.tsx:30 100,000
  

API

Необязательный оператор chaining ( ?. ) здесь выдаст undefined значение if contract равно нулю:

 contract?.data.dataCards.billing.monthlyBilling
        ^
  

Вам нужно решить, что вы хотите отображать и / или что вы хотите регистрировать в таком случае, безопасным для типов способом. Это зависит от логики, которую вы хотите реализовать.

Обратите внимание, что это:

 new Intl.NumberFormat().format(undefined)
  

Возвращает строку "NaN" , которая вряд ли будет полезной (в той степени, в которой TypeScript предполагает, что это не то, что вы хотите).