Типичные дженерики?

Question

Я пытаюсь написать директиву в машинописном виде, чтобы отобразить таблицу элементов. Модель я использую что-то вроде этого:

export class Base implements IBase { 
    prop1: number; 
    prop2: string; 
} 

export class Concrete extends Base implements IConcrete { 
    prop3: number; 
    prop4: number; 
} 

Как я мог бы написать директиву, которая принимает базовый класс и отобразить список элементов. В принципе, мне нужна общая директива, которую я могу использовать для отображения списка любого объекта, который расширяет базовый класс.

Answer 1

, который я могу использовать для отображения списка любого объекта, который расширяет базовый класс.

Вы можете указать общее ограничение, используя extends. Например. следующая функция:

function Foo<T extends Base>(base:T){} 

будет принимать любую base переменную, пока она соответствует структурному контракта, предложенной Base (из T extends Base)

Answer 2

Как я мог бы написать директиву, которая принимает базовый класс и отобразить список предметов

В следующем примере Отображаемое изображение будет выглядеть так: «Base» и «TextValue» может быть одним из таких классов, который его реализует. Это простой пример, который использует Angular2 - не может ручаться за то, насколько он обычен, поскольку я не пишу много Angular2.

import {Component, Input, ViewChild} from 'angular2/core'; 

interface Displayable { 
    displayValue: string; 
} 

class TextValue implements Displayable { 
    get displayValue() { return this.value; } 
    constructor(private value: string) { } 
} 

@Component({ 
    selector: 'list-thing', 
    template: ` 
    <h2>{{title}}</h2> 
    <ul> 
    <li *ngFor="#input of list"> 
     {{input.displayValue}} 
    </li> 
    </ul> 
    ` 
}) 
export class OtherAppComponent<T extends Displayable> { 
    @Input() title: string; 
    private list: T[] = []; 
    addToList(item: T): void { 
     console.log('adding', item.displayValue) 
     this.list.push(item); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <input #box (keyup.enter)="entered(box.value)"> 
    <list-thing title='stuff you inputted'> 
    </list-thing> 
    `, 
    directives: [OtherAppComponent] 
}) 
export class AppComponent { 
    @ViewChild(OtherAppComponent) listthing: OtherAppComponent<TextValue>; 
    constructor() { 
    } 
    value: string; 
    entered(valueEntered) { 
     this.listthing.addToList(new TextValue(valueEntered)); 
    } 
}