Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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';
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading