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

Question

I have a variable called data , which is an array that contains a function and an object . I want to define a model for this instead of using any , but unfortunately I don't know how, thank you for your help.

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

As you want your data to be an array, you can do the following:

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

you already have the code for person so you just have to annotate your prop with it. Your handleShowPerson is function and returns JSX as shown below. Lastly you wanted data to be an array so you would have to annotate that too in the interface.

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

Then you can create an array for your data object by simply initialising

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

Answer 3

Arrays can be defined by passing [] after the interface or type. So in this example the type becomes:

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