How To Make API Calls In Typescript

TypeScript is a popular programming language used for building large-scale applications. One of the key features of TypeScript is its ability to make API calls. In this article, we will discuss how to make API calls in TypeScript, with three different examples.

Example 1: Using Axios

Axios is a popular library used for making HTTP requests in JavaScript and TypeScript. To use Axios, you need to install it using npm. You can install Axios by running the following command in your terminal:

npm install axios

Once you have installed Axios, you can import it into your TypeScript file using the following code:

import axios from 'axios';

Now, let's say we want to make an API call to fetch data from a REST API. We can use Axios to make the request as shown below:

async function fetchData() {
  const response = await axios.get('https://jsonplaceholder.typicode.com/users');
  console.log(response.data);
}

In the above code, we are using the get method of Axios to make a GET request to the URL https://jsonplaceholder.typicode.com/users. The response from the API is stored in the response variable. We are then logging the data from the response to the console.

Example 2: Using Fetch

Fetch is a built-in JavaScript function that is used for making HTTP requests. To use Fetch in TypeScript, you don't need to install any external library. You can use it directly in your TypeScript code as shown below:

async function fetchData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const data = await response.json();
  console.log(data);
}

In the above code, we are using the fetch function to make a GET request to the URL https://jsonplaceholder.typicode.com/users. The response from the API is stored in the response variable. We are then using the json method of the response object to extract the data from the response. The extracted data is stored in the data variable, and we are logging it into the console.

Example 3: Using XMLHttpRequest

XMLHttpRequest is a built-in JavaScript object that is used for making HTTP requests. To use XMLHttpRequest in TypeScript, you don't need to install any external library. You can use it directly in your TypeScript code as shown below:

function fetchData() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://jsonplaceholder.typicode.com/users');
  xhr.onload = function() {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  };
  xhr.send();
}

In the above code, we are creating a new XMLHttpRequest object using the new keyword. We are then using the open method of the XMLHttpRequest object to set the request method and URL. We are also setting the onload event handler, which will be called when the response is received from the API. In the onload event handler, we are using the responseText property of the XMLHttpRequest object to extract the data from the response. The extracted data is then parsed as JSON and logged to the console.

Conclusion:

In this article, we have discussed three different examples of how to make API calls in TypeScript. We have used Axios, Fetch, and XMLHttpRequest to make the API calls. All three methods are valid and can be used depending on your specific use case. Axios is a popular choice for making HTTP requests, while Fetch is a built-in function that is easy to use. XMLHttpRequest is a low-level API that gives you more control over the request and response. Regardless of