@longroadhome

Почему нельзя передать пропсы прямо из tsx в jsx замемоизированный компонент?

Дано:
- Есть условный компонент TSXcomponent, который находится в файле с расширением .tsx
- Есть условный компонент JSXcomponent, который находится в файле с расширением .jsx
- JSXcomponent обёрнут в memo
- allowJs в tsconfig включён
- JSXcomponent имеет пропсы и использует их
- TSXcomponent передаёт пропсы в JSXcomponent
- Получаем ошибку:

Type '{ someProperty: propertyType }' is not assignable to type 'IntrinsicAttributes & object'.
Property 'someProperty' does not exist on type 'IntrinsicAttributes & object'.


Для наглядности:

JSXcomponent
export const JSXcomponent = memo((props) => {
   return <div>{props.value}</div>
})


TSXcomponent
import { JSXcomponent } from './jsx-component.jsx'

const TSXcomponent: FC = () => {
   const variable = 'value';

   return <JSXcomponent value={variable} />
}


И вот здесь уже value подсвечивается тайпскриптом, мол, ошибка.
Если убрать memo обёртку - то ошибки не будет. То есть проблема в типизации memo.

Как я обошёл эту проблему

Способ 1 (странный):
const TSXcomponent: FC = () => {
   const variable = 'value';

   const props = {
      value: variable
   }

   return <JSXcomponent {...props} />
}


Способ 2 (jsdoc):
/** @type {FC} **/
export const JSXcomponent = memo((props) => {
   return <div>{props.value}</div>
})


Вопросы:
- Со вторым способом решения всё понятно. Ts считывает jsdoc и понимает, что же возвращается. Но почему работает первый вариант?
- В чём вообще соль проблемы с 'IntrinsicAttributes & object'
  • Вопрос задан
  • 151 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы