Ошибка TypeScript при передаче нетипизированной строки компоненту React с типизированными реквизитами?

Question

У меня есть компонент Icon:

type Props = {
  icon:
    | "one"
    | "two";
}

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

Если я использую его в другом компоненте с жестко заданным значением, все в порядке:

const MyComponent = () => {
    return(
        <div>
            <Icon icon="one" />
        </div>
    )
} 

Однако, когда он устанавливается динамически из props Я получаю сообщение об ошибке TypeScript, даже если значок отображается правильно:

type Props = {
    icon?: string;
};

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

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

index.tsx (8, 3): ожидаемый тип происходит от свойства 'icon', которое здесь объявлено в типе 'IntrinsicAttributes & Props & {children ?: ReactNode; } '

Это потому, что TypeScript не знает, что переданное строковое значение будет либо «один», либо «два»?

Если так, то единственное решение, которое я могу придумать of будет экспортировать «один» и «два» как перечисление. Однако при этом использование компонента будет раздражающим, поскольку вам всегда придется импортировать это перечисление, а не просто передавать нужную строку. Есть ли более элегантное решение?

Answer 1

Свойства в компоненте имеют только значения объединения, равные одному или двум, но там, где вы используете компонент, его тип данных определяется необязательной строковой переменной, поэтому это несоответствие

type Props = {
  icon:
    | "one"
    | "two";
}


type Props = {
    icon?: string;
};

Чтобы исправить это, вам необходимо сделать оба из них согласованными

type Props = {
    icon?: "one"|"two";
};