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

Question

[longroadhome]

Дано:
- Есть условный компонент 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'

Comments

[Kentavr16]

Попробуй ради интереса

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

const TSXcomponent: FC = () => {
  // вместо const variable = 'value';

   return <JSXcomponent value={"value"} /> //явно передай строку
}

Явно тайпсрипт затруднился и ожидает судя по ошибке объект в дополнение к стандартным атрибутам. судя по всему потому проблема решается в первом случае т.к. ты даешь то что он ожидает - объект.

[WbICHA]

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

Это не проблема, чтобы её решать. Что мешает просто взять и перевести компонентв в тс? Для чего тут жс?

[Kentavr16]

WbICHA, здесь скорее не о проблеме а о понимании работы компилятора ТС.

[WbICHA]

Kentavr16, честно говоря, хз где тут можно найти понимание работы компилятора тс, поскольку речь идёт о том, как тс читает жс файлы. Только для чего это? Как это поможет глубже понять сам тс и его компилятор? В жсе он, очевидно, типы достаёт из жсдока, либо .д.тс файла.

[longroadhome]

Kentavr16, А, да нет. Это я что-то типа псевдокода хотел написал. В бою это другой, конечно же. Я его упростил.

[longroadhome]

WbICHA, Время? Проект большой. Переход осуществляется, но не за день.

[longroadhome]

Kentavr16, ++
Понимание хотелось бы заиметь )

[longroadhome]

WbICHA, Как написла выше, переход на ts за один день не делается.
В любом случае. Грешного ничего нет в желании понять конкретное поведение. Или это уже порицается, знания приобрести?

[WbICHA]

longroadhome, ну ок.

Со вторым способом решения всё понятно. Ts считывает jsdoc и понимает, что же возвращается.

Нет. Да, он читает жсдок, в котором указан несуществующий тип, а несуществующий тип эквивалентен типу any, поэтому и никаких ошибок и нет.
Если же ты импортируешь FC в файл с жс компонентом, то получишь на выходе точно такую же ошибку.

Если убрать memo обёртку - то ошибки не будет. То есть проблема в типизации memo.

А теперь, возвращаясь к этому заявлению, которое, понятное дело, неверное, что мы получаем с мемо и без? С мемо у нас есть типизация (от самого мемо), а без мемо у нас нет типизации вообще (не считая того, что мы знаем, что компонент у нас функция). И пропс у нас эни, в то время как для мемо и типа ФЦ у нас пропс должен быть объектом. Но, по скольку в жсдоке ты это не типизируешь, то на выходе у тебя пропс — пустой объект. А пустой объект не ждёт никаких свойств.
Собственно, это был ответ и на:

В чём вообще соль проблемы с 'IntrinsicAttributes & object'

Но почему работает первый вариант?

Потому что так работает тс. При деструктуризации он сравнивает 2 типа, если передаваемый тип может наследоваться от принимаемого, то всё ок, даже если есть лишние св-ва (я забыл, как это дело правильно называется, но это неважно). Так что естественно он не ругается, потому что объект со св-вами всегда будет экстендится от пустого объекта.

В общем, самым правильным решением тут было бы указать правильный тип:

import React, { memo, NamedExoticComponent } from "react";

/** @type {NamedExoticComponent<{ value: string }>} **/
export const JSXcomponent = memo((props) => {
  return <div>{props.value}</div>;
});