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

//типо все окей
<D xxx-xxx="1" />;
5
  • А почему он должен ругаться?
    – Alexey Ten
    вчера
  • @AlexeyTen потому что такого аргумента не указано в интерфейсе.
    – Armen
    вчера
  • А TS-у это неважно. Его интересуют только типы которые указаны в интерфейсе. Лишние свойства ему не мешают (за исключением литеральных объектов) typescriptlang.org/docs/handbook/…
    – Alexey Ten
    вчера
  • @AlexeyTen как это не мешают, туда же нельзя нечего лишнего передать кроме как что то с дефисом
    – Armen
    вчера
  • У вас же пропсы не передаются, на что должен ругаться TS. Можно решить проблему если передать пропсы
    – Randall
    2 часа назад

1 ответ 1

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

Новый участник
Jsouwl — новый участник сайта. Будьте снисходительны, задавая уточняющие вопросы, комментируя и отвечая. Почитайте про нормы поведения.
6
  • Typescript не ругается на ваше "xxx-xxx", тк в React допускаются компоненты с дефисами вот эту часть можно чуток детальнее, я не уловил почему он допускает аргумент каторого нету в интерфейсе.
    – Armen
    вчера
  • 1
    Ну как, тс допускает, передачу аргументов, которых нету в интерфейсе, тк он основан на структурной типизации. Это означает, что типы сравниваются на основе их структуры, а не имени или места объявления. Таким образом, ваше "xxx-xxx" имеет идентичную структуру с любым другим наименованием свойства, например "xxxaaa". Наглядный пример: Имеет интерфейс User, в котором объявлены свойства "email": string, и "age": number. const john: User = {email:"johndoe@gmail.com", age: 32, pets: ["cat"]}
    – Jsouwl
    вчера
  • 1
    john не является ошибкой, тк он хоть и имеет дополнительное свойство pets, он всё ещё имеет такую же структуру, как и у интерфейса User. Но это я что то увлёкся в основы. Надеюсь стало хоть каплю понятнее ^_^
    – Jsouwl
    вчера
  • так же не сработает: interface IZ { name: string; } const x: IZ = { name: 'dasd', sur: '222', }; будет ошибка. суть н в каличестве аргументов, ведь один же аргумент и это обект, почему с IZ все четко, а вот с props нет, также попытка передать abc как аргумент будет ошибка а вот abc-abc нет.
    – Armen
    вчера
  • если включить стрикт мод - да. Но без него, конструкция описанная выше рабочая. В вашем вопросе, вероятно, выключен стрикт мод, из за чего тс считает это допустимым свойством и пропускает
    – Jsouwl
    вчера

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.