Where do I get the typescript types of the variable from library

Question

I have been working on a react-typescript project in which I am using a lot of external libraries and I frequently find myself using any type for those libraries. Please look at the code below for the demonstration

This is for the Fontawesome library

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faSquare,
} from '@fortawesome/free-regular-svg-icons';

interface IProps {
  title: string;
  icon: any;
  onClick?: () => void;
  sx?: { [index: string]: string };
}

const icons ={
 title :_,
icon : faSquare
}

For the above code, what would be the type of icon. The value of which is faSquare. When I hovered over it the type is IconDefinition. But, I am not sure where to import it or if that is the way to do it.

Answer 1

The @fortawesome packages embed their own types, thus the type of icons.icon is inferred automatically.

In VSCode, you can right-click and "Go to type definition" to check type. In your case, the type of faSquare is IconDefinition

export interface IconDefinition extends IconLookup {
  icon: [
    number, // width
    number, // height
    string[], // ligatures
    string, // unicode
    IconPathData // svgPathData
  ];
}

You can just add it to your import from @fortawesome/free-regular-svg-icons'

import {faSquare, IconDefinition} from '@fortawesome/free-regular-svg-icons';