如何在 react 和 typescript 中定义数组的接口

Question

我有一个名为data的变量，它是一个包含function和object的array 。 我想为此定义一个 model 而不是使用any ，但不幸的是我不知道如何，谢谢你的帮助。

interface Person {
  name: string;
  age: number;
}
interface data {
  // how do i write ?
  person: Person;
  handleShowPerson: () => void ;
}
export default function App() {
  const person: Person = { name: "nil", age: 30 };
  const handleShowPerson = ({ name, age }: person) => (
    <h1>
      My name is {name} and I am {age} years old`)
    </h1>
  );
  const data: data = [person, handleShowPerson];
}

Answer 1

由于您希望数据成为数组，因此可以执行以下操作：

interface Person {
  name: string;
  age: number;
}

// First element of the array will be of type `Person`
// Second element will be a function that takes in `Person` as argument and returns JSX
// This sort of type definition is called a `Tuple` in typescript
type Data = [Person, (person: Person) => JSX.Element]

export default function App() {
  const person: Person = { name: "nil", age: 30 };
  const handleShowPerson = ({ name, age }: Person) => (
    <h1>
      My name is {name} and I am {age} years old`)
    </h1>
  );
  const data: Data = [person, handleShowPerson];
}

Answer 2

你已经有了person的代码，所以你只需要用它来注释你的 prop。 您的handleShowPerson是 function 并返回 JSX，如下所示。 最后，您希望数据是一个数组，因此您也必须在界面中对其进行注释。

interface person {
    name: string;
    age: number;
}
interface data {
    person: person;
    handleShowPerson: () => JSX.Element;
}

然后您可以通过简单的初始化为您的数据 object 创建一个数组

const data: data[] = [person, handleShowPerson];

Answer 3

Arrays 可以通过在接口或类型后传递[]来定义。 所以在这个例子中，类型变为：

interface person {
  name: string;
  age: number;
}
interface data {
  person: ;
  handleShowPerson: ;
}[]