Ошибка TypeScript с React-Fontawesome и Storybook? - PullRequest
Новая
       50

Ошибка TypeScript с React-Fontawesome и Storybook?

0 голосов
/ 29 мая 2020

Я использую TypeScript, React и компонент React-Fontawesome. MyComponent может принимать любой значок Fontawesome: 

import { IconDefinition } from "@fortawesome/fontawesome-common-types";

type Props = {
  icon: IconDefinition;
};

const MyComponent: React.FC<Props> = ({ icon }) => {
 ///
}

Поэтому используется так: 

<MyComponent icon={faCabinetFiling} />

Теперь нужно добавить компонент в Storybook. Это частично работает: 

import { select } from "@storybook/addon-knobs";
import { faCabinetFiling, faImage } from "@fortawesome/pro-light-svg-icons";

export const Title = () => (
  <MyComponent
    icon={select("icon", [faCabinetFiling, faImage], faCabinetFiling)}
  />
);

В пользовательском интерфейсе Storybook у меня есть две опции, но их имена в списке выбора - «0» и «1». При выборе любого из них компонент обновляется правильно.

Более серьезная проблема заключается в том, что я получаю ошибки TypeScript.

Клавишей icon:

TS2322: Тип SelectTypeKnobValue нельзя присвоить типу «Определение значков». Тип «строка» не может быть присвоен типу «IconDefinition».

По faCabinetFiling и faImage:

TS2322: Тип IconDefinition не может быть назначен типу string | номер | ((основание системы счисления ?: число) => строка) | (строка | число | символ) [] '. В типе 'IconDefinition' отсутствуют следующие свойства из типа '(string | number | symbol) []': length, pop, pu sh, concat и др.

...