Axios with TypeScript
In this page:
Typed GET Requests
A typed GET request with Axios passes a generic type argument like axios.get<User>(url), which types the resolved response.data directly, unlike native fetch where you must call and type .json() separately.
Example: Typed GET Requests
// import axios from "axios";
interface User { id: number; name: string; }
// const response = await axios.get<User>("/api/user");
// console.log(response.data.name);
console.log("axios.get<User>(url) types response.data directly");Typed POST Requests
A typed POST request follows the same generic pattern, typing both the request body you send and, via the generic argument, the shape of the data you expect back in the response.
Example: Typed POST Requests
interface NewUser { name: string; }
interface User { id: number; name: string; }
// const response = await axios.post<User>("/api/users", { name: "Ravi" } as NewUser);
console.log("POST body and response.data both typed via generics");Axios Response Types
Axios's own AxiosResponse<T> type wraps your data type with additional fields like .status and .headers, so unlike raw fetch, the full response object — not just the body — is fully typed out of the box.
Example: Axios Response Types
// import { AxiosResponse } from "axios";
interface User { name: string; }
// const response: AxiosResponse<User> = await axios.get("/api/user");
// console.log(response.status, response.data.name);
console.log("AxiosResponse<T> wraps data with status and headers");Axios Instances
An Axios instance created with axios.create() lets you configure a typed base URL and default headers once, then reuse that pre-configured instance across every request in your app instead of repeating config.
Example: Axios Instances
// import axios from "axios";
// const api = axios.create({ baseURL: "https://api.example.com", headers: { "X-Key": "abc" } });
// const response = await api.get("/users");
console.log("axios.create() configures a reusable typed instance");Typing Axios Errors
Typing Axios errors means narrowing a caught unknown value with Axios's own isAxiosError type guard, which then exposes a typed .response property carrying the server's actual error status and body.
Example: Typing Axios Errors
// import axios from "axios";
try {
throw new Error("Request failed");
} catch (err: unknown) {
// if (axios.isAxiosError(err)) console.log(err.response?.status);
if (err instanceof Error) console.log(err.message);
}Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: