Angular2 init具有对象文字的抽象类

时间:2017-02-27 14:38:17

标签: angular typescript

export abstract class GridColumn {
    public field?: string;
    public sortField?: string;
    public header?: string;
    public footer?: string;
    public sortable?: any = true;
    public editable?: boolean = false;
    public filter?: boolean = true;
    public filterMatchMode?: string = 'contains';
    public filterPlaceholder?: string;
    public style?: any;
    public styleClass?: string;
    public hidden?: boolean = false;
    public selectionMode?: string = 'multiple';
    public frozen?: boolean;
}

例如,执行此操作仅返回具有这些已定义属性的对象。

private gridConf: GridColumn = <GridColumn>{
    field: "test2",
    header: "Test2",
    filter: true,
    filterMatchMode: "contains",
    filterPlaceholder: "Search from Test",
    sortable: true,
    selectionMode: "single"
};

我想要的是GridColumn类型的对象,它具有所有已定义的属性和所有默认值 这不起作用:

private gridConf: GridColumn = GridColumn({
    field: "test2",
    header: "Test2",
    filter: true,
    filterMatchMode: "contains",
    filterPlaceholder: "Search from Test",
    sortable: true,
    selectionMode: "single"
});

构造函数会强迫我写一个长文件,我总是要按特定的顺序添加所有属性。

最终目标是使用具有任何顺序的所有默认和/或定义属性的类似内容:

private columns: Array<GridColumn> = [
    <GridColumn>{
        field: "test",
        selectionMode: "single",
        filter: true,
        filterMatchMode: "contains",
        filterPlaceholder: "Search from Test",
        sortable: true,
        header: "Test"

    },
    <GridColumn>{
        field: "test2",
        header: "Test2",
        filter: true,
        filterMatchMode: "contains",
        filterPlaceholder: "Search from Test",
        sortable: true,
        selectionMode: "single"
    }
];

我能找到的最近的“黑客”是删除抽象和添加,其中字段引用自身:

public constructor(
    fields?: GridColumn) {
    if (fields) Object.assign(this, fields);
}

1 个答案:

答案 0 :(得分:1)

这实际上是不可能的,但我想你可以找到一种愚蠢的方法。不是说这是最好的做法,但如果你真的想要它,那就是你可以做到的。仅供参考,如果您在非抽象类上使用new GridColumn(),则仅初始化默认值:

GridColumn

export class GridColumn implements IGridColumn {

    public sortable: boolean = true;
    public editable: boolean = false;
    public filter: boolean = true;
    public filterMatchMode: string = 'contains';
    public hidden: boolean = false;
    public selectionMode: string = 'multiple';

    public field: string;
    public sortField: string;
    public header: string;
    public footer: string;
    public filterPlaceholder: string;
    public style: any;
    public styleClass: string;
    public frozen: boolean;

    constructor(data: IGridColumn = {}){
       Object.assign(this, data);
    }
}

<强> IGridColumn

export interface IGridColumn {
    public field?: string;
    public sortField?: string;
    public header?: string;
    public footer?: string;
    public sortable?: boolean;
    public editable?: boolean;
    public filter?: boolean;
    public filterMatchMode?: string;
    public filterPlaceholder?: string;
    public style?: any;
    public styleClass?: string;
    public hidden?: boolean;
    public selectionMode?: string;
    public frozen?: boolean;
}

<强>用法

private columns: Array<GridColumn> = [
    new GridColumn(<IGridColumn>{
        field: "test",
        selectionMode: "single",
        filter: true,
        filterMatchMode: "contains",
        filterPlaceholder: "Search from Test",
        sortable: true,
        header: "Test"

    }),
    new GridColumn(<IGridColumn>{
        field: "test2",
        header: "Test2",
        filter: true,
        filterMatchMode: "contains",
        filterPlaceholder: "Search from Test",
        sortable: true,
        selectionMode: "single"
    })
];

让我再次强调,我认为这不是最佳做法。甚至命名一个以I开头的界面也不赞成:D