Question

我试图在typescript中编写一个指令来显示一个项目表。我使用的模型是这样的：

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

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

我如何编写一个带有Base类并显示项列表的指令。基本上我想要一个泛型指令，我可以用它来显示扩展Base类的任何对象的列表。

Answer 1

我可以用来显示扩展Base类的任何对象的列表。

您可以使用extends来指定通用约束。例如。以下功能：

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

只要符合base提供的结构合同（因为Base）

，它就会接受任何T extends Base变量

Answer 2

我怎样才能编写一个带有Base类的指令并显示一个项目列表

在下面的示例中，Displayable将类似于“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));
     }
 }

打字稿泛型？

2 个答案: