如何在 React 和 TS 应用程序中重用类型

Question

我正在用 React & TS 制作应用程序，并尽力改进代码（重用类型）。

我有类型：

export type Book = {
    author: string
    title: string
}

现在我有 2 个组件正在使用这种类型。

在第一个组件中，我的编译器没有发现任何问题。 (books.data - type Book 的对象数组)

<BookContent>
  {books.data.map((book: Book) => {
    return <SingleBook key={book.id} book={book} />;
  })}
</BookContent>;

但是在 SingleBook 组件中，我在道具中收到错误类型：Property 'book' does not exist on type 'Book'.ts(2339)

export const SingleBook = ({ book }: Book) => {
  return <SingleBookContainer>...restOfCode</SingleBookContainer>;
};

我应该怎么做才能解决这个问题？

编辑：

(property) book: Book
Type '{ key: number; book: Book; }' is not assignable to type 'IntrinsicAttributes & Book'.
  Property 'book' does not exist on type 'IntrinsicAttributes & Book'.ts(2322)

Answer 1

因为你正在解构 props 并将其键入 Book

第一个解决方案

export const SingleBook = ({ book }: { book: Book }) => {
  return <SingleBookContainer>...restOfCode</SingleBookContainer>;
};

第二种解决方案

type Props = {
  book: Book
}

export const SingleBook = ({ book }: Props) => {
  return <SingleBookContainer>...restOfCode</SingleBookContainer>;
};

如何在 React 和 TS 应用程序中重用类型

How to re-use type in React & TS application

typescript

reactjs