const D: FC<{ name?: string }> = () => {
return <div></div>;
};
//типо все окей
<D xxx-xxx="1" />;
-
А почему он должен ругаться?– Alexey Tenвчера
-
@AlexeyTen потому что такого аргумента не указано в интерфейсе.– Armenвчера
-
А TS-у это неважно. Его интересуют только типы которые указаны в интерфейсе. Лишние свойства ему не мешают (за исключением литеральных объектов) typescriptlang.org/docs/handbook/…– Alexey Tenвчера
-
@AlexeyTen как это не мешают, туда же нельзя нечего лишнего передать кроме как что то с дефисом– Armenвчера
-
У вас же пропсы не передаются, на что должен ругаться TS. Можно решить проблему если передать пропсы– Randall2 часа назад
1 ответ
Typescript не ругается на ваше "xxx-xxx", тк в React допускаются компоненты с дефисами. Но, такие атрибуты не могут быть напрямую указаны в типе свойств компонента, тк дефис является недопустимым символом в идентификаторах ts.
Чтобы исправить подобное поведение, можно написать интерфейс для свойств компонента.
interface MyProps extends React.HTMLAttributes<HTMLDivElement> {
'xxx-xxx'?: string;
}
Далее используем MyProps в роли типа свойств компонента:
const D: FC<MyProps > = ...
Теперь тс будет проверять тип передаваемых свойств, в тч ваш "xxx-xxx". Если "xxx-xxx" не будет в свойствах компонента, он примет значение undefined
-
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вчера -
1john не является ошибкой, тк он хоть и имеет дополнительное свойство pets, он всё ещё имеет такую же структуру, как и у интерфейса User. Но это я что то увлёкся в основы. Надеюсь стало хоть каплю понятнее ^_^– Jsouwlвчера
-
так же не сработает:
interface IZ { name: string; } const x: IZ = { name: 'dasd', sur: '222', };
будет ошибка. суть н в каличестве аргументов, ведь один же аргумент и это обект, почему сIZ
все четко, а вот сprops
нет, также попытка передатьabc
как аргумент будет ошибка а вотabc-abc
нет.– Armenвчера -
если включить стрикт мод - да. Но без него, конструкция описанная выше рабочая. В вашем вопросе, вероятно, выключен стрикт мод, из за чего тс считает это допустимым свойством и пропускает– Jsouwlвчера