جاوااسکریپت - از کجا میتوانم نوعهای تایپاسکریپت متغیر را از کتابخانه دریافت کنم

من در حال کار روی یک پروژهٔ 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 بود. اما مطمئن نیستم از کجا باید آن را وارد کنم یا آیا این روش درست است یا نه.

پاسخ شماره ۱

بستههای @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';