打字稿继承中的覆盖函数

Question

我在下面上课：

  export class RestService {

  private baseUrl: string;

  constructor(protected http: HttpClient) {
    this.baseUrl = environment.LOCAL_URL;
  }

  public get<T>(resource: string, params?: HttpParams): Observable<T> {
    const url = this.PrepareUrl(resource);
    return this.http.get<T>(url, { params }).pipe(
      retry(2),
      catchError(this.catchBadResponse)
    );
  }

  public post<T>(resource: string, model: any): Observable<T> {
    const url = this.PrepareUrl(resource);
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.post<T>(url, model, { headers }).pipe(
      retry(2),
      catchError(this.catchBadResponse)
    );
  }

  public put<T>(resource: string, model: any): Observable<T> {
    const url = this.PrepareUrl(resource);
    return this.http.put<T>(url, model).pipe(
      retry(2),
      catchError(this.catchBadResponse)
    );
  }

  public delete(resource: string, id: any): Observable<any> {
    const url = this.PrepareUrl(resource) + `\\${id}`;
    return this.http.delete(url).pipe(
      retry(2),
      catchError(this.catchBadResponse)
    );
  }

  protected PrepareUrl(resource: string): string {
    return `${this.baseUrl}/${resource}`;
  }

  protected catchBadResponse(error: HttpErrorResponse) {
    console.log('error occured!');
    return throwError(error);
  }
}

以及另一个扩展 RestService 类的类：

export class PersonRestService extends RestService {

  constructor(protected http: HttpClient) {
    super(http);

  }
  public get<T>(params?: HttpParams): Observable<T> {
    return super.get<T>('person', params);
  }

  public post<T>(model: any): Observable<T> {
    return super.post('person', model);
  }
}

我想覆盖子类中的一些函数，但我从 ide 得到了这个提示（错误）：

“PersonRestService”类型中的属性“get”不可分配给 基本类型“RestService”中的相同属性。输入'（参数？： HttpParams) => Observable' 不可分配给类型 '(resource: 字符串，参数？：HttpParams) => Observable'。 参数“params”和“resource”的类型不兼容。 类型 'string' 不可分配给类型 'HttpParams'.ts(2416)

我该怎么办？

Answer 1

您似乎遇到了following 错误。

现在你可以做以下两件事之一：

1. 更改您的签名以 100% 匹配它

   public get(resource: string, params?: HttpParams): Observable { return super.get('person', params); }

或者为了让它更好一点，改变顺序并使其成为可选：

public get<T>(params?: HttpParams, resource: string = ''): Observable<T> {
    return super.get<T>(params,'person');  
  }

1. 从PersonRestService 类中删除泛型。

第二个对我来说更有意义。你知道你的资源是一个人，所以你可以这样做：

  public getPerson(params?: HttpParams): Observable<object> {
    return super.get<object>(params,'person');  
  }

Answer 2

在打字稿中，我们不能 100% 覆盖方法；就像这个问题，我们不能覆盖遗留方法。 有一句名言说：“偏好组合胜过继承”； 所以我像下面这样更改代码 sn-ps：

1-不要更改 RestService：

export class RestService {

  private baseUrl: string;

  constructor(protected http: HttpClient) {
    this.baseUrl = environment.LOCAL_URL;
  }

  public get<T>(resource: string, params?: HttpParams): Observable<T> {
    const url = this.PrepareUrl(resource);
    return this.http.get<T>(url, { params }).pipe(
      retry(2),
      catchError(this.catchBadResponse)
    );
  }

  public post<T>(resource: string, model: any): Observable<T> {
    const url = this.PrepareUrl(resource);
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.post<T>(url, model, { headers }).pipe(
      retry(2),
      catchError(this.catchBadResponse)
    );
  }

  public put<T>(resource: string, model: any): Observable<T> {
    const url = this.PrepareUrl(resource);
    return this.http.put<T>(url, model).pipe(
      retry(2),
      catchError(this.catchBadResponse)
    );
  }

  public delete(resource: string, id: any): Observable<any> {
    const url = this.PrepareUrl(resource) + `\\${id}`;
    return this.http.delete(url).pipe(
      retry(2),
      catchError(this.catchBadResponse)
    );
  }

  protected PrepareUrl(resource: string): string {
    return `${this.baseUrl}/${resource}`;
  }

  protected catchBadResponse(error: HttpErrorResponse) {
    console.log('error occured!');
    return throwError(error);
  }
}

2-删除PersonRestService形式的RestService扩展，并在构造函数中注入RestService：

export class PersonRestService {

  constructor(private restService: RestService) {
  }
  public get<T>(params?: HttpParams): Observable<T> {
    return this.restService.get<T>('person', params);
  }
}

完成！ 现在我可以玩代码了。