黄兵的个人博客

Typescript extend super

class Animal {
  name: string;
  constructor(theName: string) {
    this.name = theName;
  }
  move(distanceInMeters: number = 0) {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}

class Snake extends Animal {
  constructor(name: string) {
    super(name);
  }
  move(distanceInMeters = 5) {
    console.log("Slithering...");
    super.move(distanceInMeters);
  }
}

class Horse extends Animal {
  constructor(name: string) {
    super(name);
  }
  move(distanceInMeters = 45) {
    console.log("Galloping...");
    super.move(distanceInMeters);
  }
}

let sam = new Snake("Sammy the Python");
let tom: Animal = new Horse("Tommy the Palomino");

sam.move();
tom.move(34);

我们看到了extends用于创建两个新子类的关键字Animal：Horse和Snake。

每个包含构造函数的派生类都必须调用super()该函数，该函数将执行基类的构造函数。更重要的是，我们之前曾访问的属性this在构造函数体，我们必须调用super()。这是TypeScript将强制执行的重要规则。

该示例还显示了如何使用专门用于子类的方法覆盖基类中的方法。在这两者中，Snake并Horse创建一个move覆盖movefrom 的方法Animal，从而为每个类提供特定的功能。请注意，即使tom被声明为Animal，由于其值是Horse，调用tom.move(34)也会在中调用覆盖方法Horse：

结果：

Slithering...
Sammy the Python moved 5m.
Galloping...
Tommy the Palomino moved 34m.

这里也有一个很好的例子，代码地址：villain.service.ts：

import { Villain } from '../classes/villain';
import { Observable } from 'rxjs';

export abstract class VillainsService {
  villainsUrl = 'api/villains';

  abstract getVillains(): Observable;
  abstract getVillain(id: number): Observable;
  abstract addVillain(name: string, episode: string): Observable;
  abstract deleteVillain(villain: Villain | number): Observable;
  abstract searchVillain(term: string): Observable;
  abstract updateVillain(villain: Villain): Observable;

}

http-client-villain.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Villain } from '../classes/villain';
import { VillainsService } from './villain.service';

const cudOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json'})};

@Injectable()

export class HttpClientVillainService extends VillainsService {
  
  constructor(private http: HttpClient) {
    super();
   }

  getVillains(): Observable {
    return this.http.get(this.villainsUrl).pipe(
      catchError(this.handleError)
    );
  }

  // get by id - will 404 when id not found
  getVillain(id: number): Observable {
    const url = `${this.villainsUrl}/${id}`;
    return this.http.get(url).pipe(
      catchError(this.handleError)
    );
  }

  addVillain(name: string, episode: string): Observable {
    const villain = { name, episode };

    return this.http.post(this.villainsUrl, villain, cudOptions).pipe(
      catchError(this.handleError)
    );
  }

  deleteVillain(villain: number | Villain): Observable {
    const id = typeof villain === 'number' ? villain : villain.id;
    const url = `${this.villainsUrl}/${id}`;

    return this.http.delete(url, cudOptions).pipe(
      catchError(this.handleError)
    );
  }

  searchVillain(term: string): Observable {
    term = term.trim();
    // add safe, encoded search parameter if term is present
    const options = term ?
    { params: new HttpParams().set('name', term)} : {};

    return this.http.get(this.villainsUrl, options).pipe(
      catchError(this.handleError)
    );
  }

  updateVillain(villain: Villain): Observable {
    return this.http.put(this.villainsUrl, villain, cudOptions).pipe(
      catchError(this.handleError)
    );
  }
  

  private handleError(error: any) {
    console.error(error);
    return throwError(error);    
  }

}

这个是一个很好的对VillainsService进行扩展的例子。

文章来源：Typescript - DOC - Classes