Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to declare an interface for dictionary?

Tags:

typescript

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.

like image 327
Benoit Avatar asked Aug 18 '16 05:08

Benoit


People also ask

Does TypeScript have dictionary?

A collection of key and value pairs is called a dictionary in TypeScript. The dictionary is also referred as a map or a hash. A map can be created by using the type Map and the keyword new. We can store the collection of key value pairs inside a map by creating a map.

How do you initialize an empty dictionary in TypeScript?

To declare and initialize a dictionary in TypeScript, we can create a dynamic object type. const persons: { [id: string]: IPerson } = {}; persons["p1"] = { firstName: "jane", lastName: "smith" }; to set the persons variable to type { [id: string]: IPerson } .

What is declare interface?

Declaring InterfacesAn interface adds the functionality of strong type checking for your functions, variables, or the class that is implementing the interface.


2 Answers

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;   
    }
}
like image 119
Nitzan Tomer Avatar answered Sep 28 '22 02:09

Nitzan Tomer


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
    }
}
like image 21
Vadim Levkovsky Avatar answered Sep 28 '22 01:09

Vadim Levkovsky