在 Typescript 中实现抽象类的类的动态返回类型答案

【问题标题】：Dynamic return type for a class implementing an abstract class in Typescript在 Typescript 中实现抽象类的类的动态返回类型
【发布时间】：2021-05-12 20:58:46
【问题描述】：

我有一个抽象类“AbstractDetailsService”，如下所示：

import { Injectable } from '@angular/core';

export class DetailEntities<T> {
 id: number;
 role:  string;
 data: T[];
}

export class User {
 name: string;
 age: number;
}

export class Customer {
 customerName: string;
 customerAge: number;
}

@Injectable()
export abstract class AbstractDetailsService<T> {
 abstract get(entity: string): DetailEntities<T>;
}

然后我有一个“PersonDetailsService”类，它实现了上述类并根据作为实体传递的内容返回用户或客户

import { Injectable } from '@angular/core';
import { AbstractDetailsService, Customer, DetailEntities, User } from './abstract-detail.service';

@Injectable()
export class PersonDetailsService implements AbstractDetailsService<DetailEntities<any>> {

get(entity: string): DetailEntities<any> {
   if (entity === 'user') {
     const users: User[] = [{name: 'abc', age: 21}]
     const userDetails: DetailEntities<User> = {id: 1, role: 'Developer', data: users};
     return userDetails;
   }
   const customers: Customer[] = [{customerName: 'abc', customerAge: 21}]
   const customerDetails: DetailEntities<Customer> = {id: 1, role: 'Developer', data: customers};
   return customerDetails;
 }
}

这是我在 providers 数组中注入 PersonDetailsService 的组件代码：

import { Component, OnInit, VERSION } from "@angular/core";
import {
 AbstractDetailsService,
 DetailEntities,
User
} from "./abstract-detail.service";
import { PersonDetailsService } from "./person-detail.service";

@Component({
 selector: "my-app",
 templateUrl: "./app.component.html",
 styleUrls: ["./app.component.css"],
 providers: [
   {
     provide: AbstractDetailsService,
     useClass: PersonDetailsService
   }
 ]
})
export class AppComponent implements OnInit {
 name = "Angular " + VERSION.major;
 details: DetailEntities<User>;

 constructor(private readonly detailService: AbstractDetailsService<any>) {}

 ngOnInit(): void {
   const entity = "user";
   this.details = this.detailService.get(entity);
 }
}

我不确定如何将any 的类型替换为User 或Customer。我怎样才能拥有返回类型为动态的“get”函数？此外，泛型类型应该只接受用户和客户。

Stackblitz 网址 - https://stackblitz.com/edit/angular-typescript-dynamic-return-type?file=src%2Fapp%2Fperson-detail.service.ts

感谢您的帮助 :-)

【问题讨论】：

标签： angular typescript

【解决方案1】：

看起来一个简单的解决方案可能是union type。

代替

get(entity: string): DetailEntities<any>

你可以声明

get(entity: string): DetailEntities<User | Customer>

更复杂的解决方案可以使用conditional types。

【讨论】：