我在哪里可以从库中获取变量的打字稿类型

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
}

对于上面的代码，icon 的类型是什么？其值为faSquare。当我将鼠标悬停在它上面时，类型是 IconDefinition。但是，我不确定在哪里导入它，或者是否可以这样做。

Answer 1

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

在VSCode中，您可以right-click和“转到类型定义”来检查类型。在你的例子中，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';

我在哪里可以从库中获取变量的打字稿类型

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

javascript

typescript

font-awesome

typescript-typings

react-typescript