How do I specify an array with multiple objects in a TypeScript interface?

Question

I have some React-Redux-Typescript code, and I am getting results from an API and trying to create interfaces for the response objects. Here I have my Example data:

    const exampleState: ExampleState = {
  loading: false,
  products: {
    "id": 11001,
    "campus": "hrnyc",
    "name": "Camo Onesie",
    "slogan": "Blend in to your crowd",
    "description": "The So Fatigues will wake you up and fit you in. This high energy camo will have you blending in to even the wildest surroundings.",
    "category": "Jackets",
    "default_price": "140.00",
    "created_at": "2021-01-12T21:17:59.200Z",
    "updated_at": "2021-01-12T21:17:59.200Z",
    "features": [
        {
            "feature": "Fabric",
            "value": "Canvas"
        },
        {
            "feature": "Buttons",
            "value": "Brass"
        }
    ]
  }
};

and here is my interface for this object:

export interface Featured {
  "id": number
  "campus": string,
  "name": string,
  "slogan": string,
  "description": string,
  "category": string,
  "default_price": string,
  "created_at": string,
  "updated_at": string,
  "features": [
      {
          "feature": string,
          "value": string
      }
  ]
}

I am getting the following error within my reducer:

TypeScript error in /Users/theo/Desktop/hrnyc34-fec-falcullele/my-app/src/reducers/singleProductReducer.ts(20,5):
Type '[{ feature: string; value: string; }, { feature: string; value: string; }]' is not assignable to type '[{ feature: string; value: string; }]'.
  Types of property 'length' are incompatible.
    Type '2' is not assignable to type '1'.  TS2322

    18 |     "created_at": "2021-01-12T21:17:59.200Z",
    19 |     "updated_at": "2021-01-12T21:17:59.200Z",
  > 20 |     "features": [
       |     ^
    21 |         {
    22 |             "feature": "Fabric",
    23 |             "value": "Canvas"

As far as I can tell the issue is that there are multiple objects inside of the 'features' array. There can be up to a dozen objects in this features array potentially. How can I remedy this typescript error?

You've specified a tuple type, not an array type. See typescriptlang.org/docs/handbook/basic-types.html — jonrsharpe
– jonrsharpe, Commented Jan 16, 2021 at 21:21
@jonrsharpe You're completely right. Learning typescript on the fly currently. Thanks for your help. — dd0sxx
– dd0sxx, Commented Jan 16, 2021 at 21:27

Ben Wainwright · Accepted Answer · 2021-01-16 21:32:21Z

4

The type you've specified for feature is a tuple - a fixed length array whose elements have known types. The following is what you want:

type FeatureType = {
   "feature": string,
   "value": string
}

export interface Featured {
  "id": number
  "campus": string,
  "name": string,
  "slogan": string,
  "description": string,
  "category": string,
  "default_price": string,
  "created_at": string,
  "updated_at": string,
  "features": FeatureType[]
}

(Note: I've extracted 'feature' out into a type alias for readability, which you don't have to do)

edited Jan 16, 2021 at 21:32

answered Jan 16, 2021 at 21:26

Ben Wainwright

4,7111 gold badge21 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jonrsharpe Over a year ago

If you're extracting the feature type I'd still have the array part in Featured, then you have easy access to the type for each value in that array.

Ben Wainwright Over a year ago

That's a good idea, I'll edit the answer.

melenchenkov · Accepted Answer · 2022-07-28 18:11:25Z

features -- Key Value Pair in the Object has an Array type with an same Object Type which has key value pairs feature,value are repeated inside the Array multiple times (no fixed length) -- this refers to tuple -- a Typescript feature which helps us to easily declare the same Object to check for any type,lint,compilation errors

interface Feature {
            "feature": string,
             "value": string
}


interface Featured {
  "id": number
  "campus": string,
  "name": string,
  "slogan": string,
  "description": string,
  "category": string,
  "default_price": string,
  "created_at": string,
  "updated_at": string,
  "features": Feature[]
}

//export is used when the interface is declared in other file where we import the file to use the interface (mainly used in model files ,instead of interface we class)

Collectives™ on Stack Overflow

How do I specify an array with multiple objects in a TypeScript interface?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related