在Angular抽象泛型组件中使用signalStoreFeature()的类型问题

方法1：用ReturnType工具类型直接推导 #

你可以借助TypeScript的ReturnType工具类型，直接获取baseEntityStore函数的返回类型，无需额外定义新类型：

@Component({ template: '' })
export abstract class BaseEntityComponent<Entity extends BaseEntity> implements OnInit {
  protected entity: Entity | undefined;
  protected formBuilder = inject(FormBuilder);
  protected formGroup!: FormGroup;
  // 直接推导baseEntityStore的返回类型作为store的类型
  protected store: ReturnType<typeof baseEntityStore<Entity, BaseEntityService<Entity>>>;

  protected constructor(repository: Type<BaseEntityService<Entity>>) {
    this.store = inject(baseEntityStore(repository));
    this.store.loadAll();
    this.registerEffects();
  }
  // ... 其他逻辑代码
}

方法2：定义专属类型别名（提升可读性） #

如果觉得直接用ReturnType不够直观，可先为baseEntityStore的返回类型定义一个别名：

// 提取baseEntityStore的返回类型为专用别名
export type BaseEntityStore<Entity extends BaseEntity> = ReturnType<typeof baseEntityStore<Entity, BaseEntityService<Entity>>>;

// 在组件中使用该别名
@Component({ template: '' })
export abstract class BaseEntityComponent<Entity extends BaseEntity> implements OnInit {
  protected entity: Entity | undefined;
  protected formBuilder = inject(FormBuilder);
  protected formGroup!: FormGroup;
  protected store: BaseEntityStore<Entity>;

  protected constructor(repository: Type<BaseEntityService<Entity>>) {
    this.store = inject(baseEntityStore(repository));
    this.store.loadAll();
    this.registerEffects();
  }
  // ... 其他逻辑代码
}

进阶适配：支持实体专属DataService #

如果后续需要适配继承自BaseEntityService的实体专属DataService，可以扩展组件的泛型参数，让类型匹配更灵活：

@Component({ template: '' })
export abstract class BaseEntityComponent<
  Entity extends BaseEntity,
  DataService extends BaseEntityService<Entity> = BaseEntityService<Entity>
> implements OnInit {
  protected entity: Entity | undefined;
  protected formBuilder = inject(FormBuilder);
  protected formGroup!: FormGroup;
  // 匹配专属DataService对应的store类型
  protected store: ReturnType<typeof baseEntityStore<Entity, DataService>>;

  protected constructor(repository: Type<DataService>) {
    this.store = inject(baseEntityStore(repository));
    this.store.loadAll();
    this.registerEffects();
  }
  // ... 其他逻辑代码
}

这样实体专属组件继承时，只需传入自身的DataService类型，store的类型会自动同步匹配。

内容的提问来源于stack exchange，提问作者Zsolt