我在哪里从库中获得变量的typescript类型?

Question

我一直在做一个react-typescript项目，在这个项目中我使用了很多外部库，我经常发现自己使用any键入这些库。请看下面的代码

Fontawesome库

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
}

对于上面的代码，图标的类型是什么?。其值为faSquare。当我将鼠标悬停在它上面时，类型是IconDefinition。但是，我不确定在哪里导入它，或者如果这是这样做的方式。

Answer 1

@fortawesome包嵌入了它们自己的类型，因此icons.icon的类型被自动推断。

在VSCode中，您可以右键单击并"转到类型定义"。检查类型。在您的示例中，faSquare的类型为IconDefinition

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

你可以把它添加到你从@fortawesome/free-regular-svg-icons'导入的

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