Применение встроенного типа пропса TSX для объявления функции, которая объявляет реквизиты с использованием деструктуризации объекта

Question

У меня есть пользовательский тип

export class MyClass {
  name: string;
  img: string;

  constructor(name: string) {
    this.name = name;
    this.img = `/images/${name}.jpg`;
  }
}

У меня есть функциональный компонент без состояния, который принимает этот тип в качестве параметра

export default (issue: Issue) => {
...
}

И когда я пытаюсь создать этот функциональный компонент без состояния

<MagazineCard issue={issues[0] as Issue} />

Я получаю сообщение об ошибке

Type '{ issue: any; }' is not assignable to type 'IntrinsicAttributes & Issue'.

---

Существует решение ниже, но я чувствовал, что должен оставить этот материал для других, кто может увидеть этот вопрос для альтернативные решения и более глубокое понимание

Деструктуризация объекта при инициализации JSX , например:

<MagazineCard {...issues[0]} />

Создайте интерфейс для аргументов моего функционального компонента без сохранения состояния.

Примечание: типы указывать не нужно

Proptypes

MagazineCard.propTypes = {
  issue: Issue
}

Answer 1

Вот как это делается

export default ({issue} : {issue : Issue}) =>  => (
    //...Your JSX component
)

Я был сбит с толку, потому что мне это показалось слишком сложным, поэтому я сделал сообщение на Reddit, спрашивая, почему это синтаксис для этого