Typescript Pt. 8 - Type Declarations

Type Declarations in Third-Party Modules

• Some third-party modules may declare types in their own @types packages.
• The type declarations are usually located in the index.d.ts file.

Example Axios

• Axios is a popular library for making HTTP requests.
• Axios has its own @types/axios package that declares types for the library.
• The @types/axios package is installed automatically when you install the axios package.

import axios from "axios";

axios.get("https://example.com");

• The @types/axios package declares types for the axios module.

declare module "axios" {
  export interface AxiosResponse<T = any> {
    data: T;
  }
}

• The AxiosResponse interface is declared in the @types/axios package.
• When you import the axios module, the AxiosResponse interface is available.

import axios, { AxiosResponse } from "axios";

axios.get("https://example.com").then((response: AxiosResponse) => {
  console.log(response.data);
});

• When making a request with axios to an api like JSONPlaceholder, we can declare the type of the response.
• For example if we make a GET request to https://jsonplaceholder.typicode.com/users/1, we can declare the type of the response as User.

import axios from "axios";

interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  address: {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
    geo: {
      lat: string;
      lng: string;
    };
  };
  phone: string;
  website: string;
  company: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
}

axios
  .get<User>("https://jsonplaceholder.typicode.com/users/1")
  .then((response) => {
    console.log(response.data);
  });

// Output
// {
//   id: 1,
//   name: 'Leanne Graham',
//   username: 'Bret',
//   email: '
//   address: {
//     street: 'Kulas Light',
//     suite: 'Apt. 556',
//     city: 'Gwenborough',
//     zipcode: '92998-3874',
//     geo: { lat: '-37.3159', lng: '81.1496' }
//   },
//   phone: '1-770-736-8031 x56442',
//   website: 'hildegard.org',
//   company: {
//     name: 'Romaguera-Crona',
//     catchPhrase: 'Multi-layered client-server neural-net',
//     bs: 'harness real-time e-markets'
//   }

• If we are getting an array of users, we can declare the type of the response as User[].

import axios from "axios";

interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  address: {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
    geo: {
      lat: string;
      lng: string;
    };
  };
  phone: string;
  website: string;
  company: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
}

axios
  .get<User[]>("https://jsonplaceholder.typicode.com/users")
  .then((response) => {
    console.log(response.data);
  });

• We can use the interface User to loop through the response and display the data. For example, just the names and usernames.

import axios from "axios";

interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  address: {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
    geo: {
      lat: string;
      lng: string;
    };
  };
  phone: string;
  website: string;
  company: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
}

axios
  .get<User[]>("https://jsonplaceholder.typicode.com/users")
  .then((response) => {
    response.data.forEach((user) => {
      printUser(user);
    });
  });

function printUser(user: User) {
  console.log(`User: ${user.name} (${user.username})`);
}

// Output
// User: Leanne Graham (Bret)
// User: Ervin Howell (Antonette)
// User: Clementine Bauch (Samantha)
// User: Patricia Lebsack (Karianne)

Example Lodash

• Lodash is a popular library for working with arrays, objects, and strings.
• Lodash has its own @types/lodash package that declares types for the library.
• The @types/lodash package is NOT installed automatically when you install the lodash package.
• You must install the @types/lodash package separately with npm install @types/lodash.

npm install lodash
npm install @types/lodash

• The @types package is a package that contains type declarations for popular third-party JavaScript libraries.
• The @types package is installed separately from the library itself using the npm install command, followed by the name of the @types package.

npm install @types/<library-name> --save-dev