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

Answer 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

Answer 2

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]