typescript не ругается на переданные аргументы в компоненте с дифисом? почему так и можно ли это как то исправить?

Рейтинг: 1Ответов: 1Опубликовано: 18.03.2023

const D: FC<{ name?: string }> = () => {
   return <div></div>;
};

//типо все окей
<D xxx-xxx="1" />;

reactjs typescript

Источник: Stack Overflow на русском

Ответы

▲ 0

Typescript не ругается на ваше "xxx-xxx", тк в React допускаются компоненты с дефисами. Но, такие атрибуты не могут быть напрямую указаны в типе свойств компонента, тк дефис является недопустимым символом в идентификаторах ts.

Чтобы исправить подобное поведение, можно написать интерфейс для свойств компонента.

interface MyProps extends React.HTMLAttributes<HTMLDivElement> {
  'xxx-xxx'?: string;
}

Далее используем MyProps в роли типа свойств компонента:

const D: FC<MyProps > = ...

Теперь тс будет проверять тип передаваемых свойств, в тч ваш "xxx-xxx". Если "xxx-xxx" не будет в свойствах компонента, он примет значение undefined