Cast String to Number in Typescript on JSON API response in Typescript

Question

I am making an API call with Axios which returns JSON. The API returns CUSIP as type String, however, I would like to receive it as type Number. I created an interface which has the typescript type as number however when I get the variable, it is still treated as a String.

API Call and some logic:

const axios = require('axios');
import { General } from './json-objects-new';

module.exports = {
    makeApiCall : function(ticker:string) {

    axios.get(`${API_ENDPOINT}${ticker}?api_token=${API_KEY}`)
        .then(function (response) {
            // handle success    
            return response.data;

        })
        .catch(function (error) {
            // handle error
            console.log(error);
        })
        .then(data => {

            let gen : General = data.General;

            let num = gen.CUSIP + 1337

            console.log(num);

        });

    }
}

interface called General where I cast CUSIP to number:

export interface General {
    ISIN: string;
    CUSIP: number;
}

The problem: instead of printing [CUSIP + 1337] as [2 + 1337 = 1339], it is printing [21337]. Would love some help thanks. I really dont want to have to cast everything manually in a constructor.

Not sure what "I really dont want to have to cast everything manually in a constructor." means. You have no constructors... Also, casting in TypeScript never changes the variable, it's just telling the compiler that you know what you are doing, which in this case, you didn't because the underlying object is still a string :p — Ruan Mendes, Aug 27 '19 at 14:30

score 1 · Answer 1 · answered Aug 27 '19 at 14:26

Try changing CUSIP from a string to a number:

const axios = require("axios");
import { General } from "./json-objects-new";

module.exports = {
  makeApiCall: function(ticker: string) {
    axios
      .get(`${API_ENDPOINT}${ticker}?api_token=${API_KEY}`)
      .then(function(response) {
        // handle success
        return response.data;
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      })
      .then(data => {
        let gen: General = data.General;

        let num = Number(gen.CUSIP) + 1337; /* convert CUSIP string to number */

        console.log(num);
      });
  }
};

However, this is not hitting the root cause. The interface expects gen.CUSIP to be of type "number". The problem here is that Axios deserializes a string and puts a string into a number property. I have the same issue vice versa. This breaks type safety. My expectation would be that Axios had an option for STRICT deserialisation of types, returning an error if string <-> number mismatch between JSON and interface member type. — Mick Belker - Pseudonym, Oct 06 '22 at 10:34

score 0 · Answer 2 · answered Aug 27 '19 at 14:26

You have to remember that Typescript is only a layer of types above Javascript, it will not modify the actual javascript.

In your case, even if CUSIP is typed as a number, the actual data you received is a string. You should declare what you get from the API as a string and then cast it as a number with parseInt(gen.CUSIP, 10).

Cast String to Number in Typescript on JSON API response in Typescript

2 Answers2