为使用对象解构声明 props 的函数声明强制执行 TSX prop 类型内联

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'.

下面有一个解决方案，但我觉得我应该把这个 material 留给可能会看到这个问题的其他人，以获得替代解决方案和更深入的理解

，例如：

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

用于我的无状态功能组件的参数。

Note:

道具类型

MagazineCard.propTypes = {
  issue: Issue
}

Answer 1

这是怎么做的

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

我很困惑，因为它对我来说太复杂了，所以我 made a post on reddit asking why this is the syntax for doing it

为使用对象解构声明 props 的函数声明强制执行 TSX prop 类型内联

Enforcing TSX prop type inline for function declaration which declares props using object destructuring

typescript

reactjs

object-destructuring