Typescript interface for Array of object that has nested object

Question

I have array of object like this:

export const EXAMPLE_CONFIG: IExampleConfig = [
 {
  urlPath: '/test/test',
  page: 'test',
  fields: {
   fullName: 'a',
   mobilePhoneNumber: 'b',
   emailAddress: 'c',
   .......
  }
 },
 {
  ... same as above
 },
]

And i create an interface like this:

export interface IExampleConfig {
  path: string;
  pageTitle: string;
  fields: { [key: string]: string };
}

It gives me error: Type '({ path: string; pageTitle: string; fields: { fullName: string; mobilePhoneNumber: string; emailAddress: string; emailIsOwn: string; mediasource: string; }; } | { path: string; pageTitle: string; fields: { ...; }; } | ... 7 more ... | { ...; })[]' is missing the following properties from type 'IExampleConfig': path, pageTitle, fields

EXAMPLE_CONFIG: IExampleConfig-> EXAMPLE_CONFIG: IExampleConfig[] to specify an array — VLAZ
– VLAZ, Commented Mar 13, 2020 at 4:47

Ehtesham Ahmad Nadim · Accepted Answer · 2020-03-13 06:12:35Z

1

Instead of writing this:

export interface IExampleConfig {
  path: string;
  pageTitle: string;
  fields: { [key: string]: string };
}

try this:

export interface IExampleConfig {
  path?: string;
  pageTitle?: string;
  fields?: { [key: string]?: string };
}

? is a Typescript symbol which marks the interface attribute is optional

answered Mar 13, 2020 at 6:12

Ehtesham Ahmad Nadim

4315 silver badges18 bronze badges

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

Comments

Ben Ari Kutai · Accepted Answer · 2020-03-13 07:42:45Z

0

Seems like your type is wrong.

Do this:

export const EXAMPLE_CONFIG: IExampleConfig[]

instead of this:

export const EXAMPLE_CONFIG: IExampleConfig

Plus, in case you want to make the interface optional, instead of turning the entire interface to optional you can use the Typescript utility type - Partial. It takes in interface and turning it into an optional interface based on usage.

Declaration:

export interface IExampleConfig {
  path: string;
  pageTitle: string;
  fields: { [key: string]: string };
}

Usage

let example: Partial<IExampleConfig> = { path: 'path/to/file' }

You can read more about it here: [https://www.typescriptlang.org/docs/handbook/utility-types.html#partialt][1]

answered Mar 13, 2020 at 7:42

Ben Ari Kutai

5694 silver badges9 bronze badges

Collectives™ on Stack Overflow

Typescript interface for Array of object that has nested object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related