Define Interface containing array of objects

Question

I have an object that is used in many parts of my code so I want to export it as an interface. My object is like this :

 trueFalse: {'itemList' : Array<{'text'; 'value'}>} = {
    itemList: [
      {text: 'foundItem', value: true},
      {text: 'foundItem', value: false}
    ]
  };

I tried to import it this way but it doesn't work :

export interface ITrueFalse {
  text: string = 'foundItem',
  value: boolean
  itemList: Array<{'text';'value'}>
}

I want to implement the above interface in some way like this:

trueFalse: {'itemList' : ITrueFalse} = {
    itemList : [{},{}]
;

As you can see I don't have much idea of typescript interfaces. I've only done basic type definition. So I don't know what I'm doing wrong. Thank you for any suggestions :)

Aluan Haddad · Accepted Answer · 2017-04-28 10:28:45Z

35

export interface TrueFalseItem {
  text: string;
  value: boolean;
}


export interface TrueFalseListWrapper { // renamed from ITrueFalse
  itemList: TrueFalseItem[];
}

You can also write the item type itself inline which is convenient if you only need to refer to it as part of the structure of TrueFalseListWrapper

export interface TrueFalseListWrapper {
  itemList: { text: string, value: boolean }[];
}

answered Apr 28, 2017 at 10:28

Aluan Haddad

32.1k10 gold badges83 silver badges95 bronze badges

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

5 Comments

Bijay Timilsina Over a year ago

isn't there some way to add he first two together? something like : export interface TrueFalseItem: [ ] { }

Aluan Haddad Over a year ago

Not quite, but see the second example for a single definition version. You may have unnecessary nesting in your data structures if you need an interface like this to describe it.

Bijay Timilsina Over a year ago

I think what I don't understand is Array<{'text'; 'value'}> where there is a semicolon inside (the why there isn't it a comma part)

Aluan Haddad Over a year ago

That is called an object literal type. You can use either a semi-colon or a comma in an object literal type. Any type declaration, such as an interface, is comprised of name: type elements. When you omit the type of an element, it defaults to any. That means that { text; value } is the same type as { text: any; value: any }. The quotes are optional.

Bijay Timilsina Over a year ago

Let us continue this discussion in chat.

Amel · Accepted Answer · 2021-02-19 15:02:44Z

7

Here is another solution that I prefer:

interface ItemListValue {
  text: string,
  value: boolean,
}

export interface ItemList extends Array<ItemListValue > {

}

let result: ItemList;

With this solution you can use all properties and methods of the Array (like: length, push(), pop(), splice() ...)

edited Feb 19, 2021 at 15:02

answered Sep 10, 2020 at 12:47

Amel

7939 silver badges16 bronze badges

1 Comment

Aluan Haddad Over a year ago

Defining an empty interface is misleading and considered a bad practice given the structurally typed nature of TypeScript. Use export type ItemList = Array<ItemListValue>; which makes the intent clear and the code clean

Collectives™ on Stack Overflow

Define Interface containing array of objects

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related