使用interfect在TypeScript中定义对象数组？

Question

I am using TS 3.7.4 and believe most types are now made with interfaces.

I have a prop that looks like this:

  images={
    [
      {
        image: 'https://www.commerciallistings.cbre.co.uk//resources/fileassets/GB-Plus-480572/09e35192/11%20Strand%201_Photo_1_small.jpg',
        altTag: "An Image"
      },
      {
        image: 'https://www.commerciallistings.cbre.co.uk//resources/fileassets/GB-Plus-480572/09e35192/11%20Strand%201_Photo_1_small.jpg',
        altTag: "An Image"
      }
    ]
  }

I would like to use interface as I find this less verbose.

I have tried:

 images: Array[object]

Answer 1

You can create a interface like:

export interface ImageProps{
  image: string,
  altTag: string
}

And you can use it like:

const Image = ({ props: ImageProps[] }){
  // Your code here.
}

Hope this works for you.

Answer 2

First create an interface for the image object. Then declare the images prop to be and array of that interface.

Interface Image {
  image?: String;
  altTag?: String;
}

...

images: Image[]  

Answer 3

Honestly, without meaning to sound condescending, I'd recommend reading up on the docs as this is fairly basic task and you'll struggle in the future if you won't get the basics down right.

---

1. First you need to define your Image object Interface. It's almost never a good idea to simply pass a default Object as a type and kind of defeats the purpose of typescript - as you want to be as explicit as possible.

    interface ImageType { image: string, altTag: string, }

2. Then define your props

   interface Props { images: ImageType[] // Alternatively Array<ImageType> } const MyComponent: React.FC<Props> = (props: Props) => { // ... }