绑定元素“note”隐式具有“any”类型

Question

我收到了我确定是由于 typescript 引起的错误。 这是我试图开始工作的一个例子。 我使用js服务器导入一些笔记。 错误是 NoteCard.tsx 文件中 {note} 下的红线。 有人可以帮我了解如何使用这些属性。

这是我的notecard.tsx

export default function NoteCard({ note }) {  return <div>{note.title}</div>;}

这是我的notes.tsx

export default function Notes() {
const [notes, setNotes] = useState<any[]>([]);

useEffect(() => {
fetch("http://localhost:8000/notes")
  .then((res) => res.json())
  .then((data) => setNotes(data));
}, []);

return (
<Container>
  <Grid container>
    {notes.map((note) => (
      <Grid item key={note.id} xs={4} md={4} lg={4}>
        <NoteCard note={note} />
        {/* <Paper>{note.title}</Paper> */}
      </Grid>
    ))}
  </Grid>
</Container>
);
}

Answer 1

尝试在 NoteCard function 中添加道具接口

interface NoteCardProps {
  note: {
    title: string
  }
}

export default function NoteCard({ note }: NoteCardProps) {  return <div>{note.title}</div>;}

Answer 2

隐含的措辞并非巧合。 您可以简单地键入 function，并为其指定显式类型。

export default function NoteCard({ note }: { note: any }) {  return <div>{note.title}</div>;}

这应该可以修复警告。

Answer 3

我的另一个答案解释了如何消除 linter-warning。 但是，它没有解决代码的根本问题。 使用 TypeScript 的主要好处之一是它是在types的帮助下进行静态类型化的。 类型any为最高类型，类似于Java中的Object； 所有类型都是any的子类型。 应尽可能避免使用any类型，因为您实际上再次使用了动态类型； 这意味着您或多或少会重新使用普通的 JavaScript。

为了完整起见，我将添加一个片段来展示我将如何编写这样一个组件。

export type Note = {
  title: string
}

export default function NoteCard({note}: {note: Note}) {
  return <>{note.title}</>
}

export default function Notes() {
  const [notes, setNotes] = useState<Note[]>([])
  // Rest of Notes.tsx  
}