CODEWITHSUNDEEP
typescript
Benoit
Benoit

Reputation: 1107

How to declare an interface for dictionary?

I wish to add definition for a plugin I love and I wish to know how I can define the type to allow this without use the type any.

I will use the property like this:

    views: {
        'list.view1': {
          dropPagingCap: 20,
          list_infiniteScroll: true,
          list_selectable: 'multi'
        },
        'list.view2': {
          dataSource: function(options, callback){ ... },
          dropPagingCap: 30,
          list_selectable: true
        }
    }

I have tried this, but the library except an object {}, not an array []

interface IFuelUxRepeaterViews {
    [index: string]: IFuelUxRepeaterParametersBase | IFuelUxRepeaterListParameter | IFuelUxRepeaterTumbnailParameter | IFuelUxRepeaterAllParameter;
}

I don't know how to name this JavaScript type of declaration.

Upvotes: 5

Views: 8837

Answers (2)

Vadim Levkovsky
Vadim Levkovsky

Reputation: 336

interface IFuelUxRepeaterParametersBase {
    dropPagingCap: number,
    list_selectable: boolean | string
}

interface IFuelUxRepeaterTumbnailParameter extends IFuelUxRepeaterParametersBase {
    list_infiniteScroll: boolean,
}

interface IFuelUxRepeaterListParameter extends IFuelUxRepeaterParametersBase {
    dataSource: (x: any, y: any) => any,
}

interface IFuelUxRepeaterViews {
    [index: string]: IFuelUxRepeaterParametersBase | IFuelUxRepeaterListParameter | IFuelUxRepeaterTumbnailParameter ;
}


let views: IFuelUxRepeaterViews = {
    'list.view1': {
        dropPagingCap: 20,
        list_infiniteScroll: true,
        list_selectable: 'multi'
    },
    'list.view2': {
        dataSource: (options, callback) => { },
        dropPagingCap: 30,
        list_selectable: true
    }
}

Upvotes: 1

Nitzan Tomer
Nitzan Tomer

Reputation: 164137

From your code example it seems like your views can be represented using the following interface:

interface IFuelUxRepeaterViews {
    [index: string]: {
        dropPagingCap: number;
        dataSource?: (options: any, cb: () => void) => void;
        list_infiniteScroll?: boolean;
        list_selectable?: string | boolean;   
    }
}

Upvotes: 14

Related Questions