javascript - 我在哪里从库中获取变量的 typescript 类型

Question

我一直在开发一个react-typescript项目，在该项目中我使用了很多外部库，并且我经常发现自己对这些库使用任何类型。请看下面的代码进行演示

这是用于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';