时间戳

首页 > 解决方案 > 打字稿类型转换可观察变量

angular - 打字稿类型转换可观察变量

问题描述

我正在使用 Angular 12。

为了减少相同服务逻辑的代码，我一次又一次地尝试创建一个包含所有 HTTP 方法的基类，并扩展子类以在组件中使用。

crud.service.ts

@Injectable({
  providedIn: "root"
})
export class CrudService {
  protected endpoint: string;
  protected listObservableType: any;

  constructor(
    private http: AppHttpClient
  ) {
  }

  list(query: {[key: string]: any}): Observable<any> {
    const url = `${this.endpoint}`;

    let param = ''
    for (let key in query) {
      param += `${key}=${query[key]}&`
    }

    return this.http.Get(`${url}?${param}`);
  }
}

要使用基类，子类可以写成

@Injectable({
  providedIn: "root"
})
export class CategoryService extends CrudService {
  endpoint = 'category/';
}

子类中的设置endpoint将覆盖父类，并且将自动提供所有重复的 CRUD 操作。

到目前为止，这工作正常，但方法的返回类型list()是Observable<any>.

我想使用listObservableType可以分配接口的变量动态设置返回类型

export class CategoryService {
  listObservableType = Array<CategoryItem>;
}

那么返回类型可以写成

list(): Observable<this.listObservableType> {
  ...
}

我不确定它应该如何，但上述逻辑不起作用。

Stackblitz：https ://stackblitz.com/edit/angular-dynamic-observable?file=src%2Fapp%2Fservices%2Fcrud.service.ts

编辑 2：接口

每个子服务都有如下接口

分页列表页面

export interface CategoryListResponse {
  count: number;
  next: string;
  previous: string;
  results: Array<CategoryItem>;
}

export interface CategoryItem {
  id: number;
  title: string;
}

该list()方法将返回 observable ofCategoryListResponse而get(),create()端点将返回 observable of CategoryItem。

标签： angulartypescript

解决方案

使用参数化泛型：

export class CrudService<T> {
  list(): Observable<T[]> {
    ...
  }
  getById(id: string): Observable<T>{...}
}

export class CategoryService extends CrudService<CategoryItem>

推荐阅读