打字稿泛型？

Question

I am attempting to write a directive in typescript to display a table of items. The model I am using is something like this:

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

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

How could I write a directive that takes the Base class and display a list of items. Basically I want a generic directive that I can use to display a list of any object that extends the Base class.

Answer 1

that I can use to display a list of any object that extends the Base class.

You can sepecify a generic constraint using extends . Eg the following function:

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

Will accept any base variable as long as it conforms to the structural contract offered by Base (because of T extends Base )

Answer 2

How could I write a directive that takes the Base class and display a list of items

In the following example Displayable would be like "Base" and "TextValue" could be one such class that implements it. This is a simple example that uses Angular2 -- can't vouch for how conventional it is since I don't write much 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));
     }
 }