angular - 用秋田实现基本抽象状态的适当方法

Question

我试图实现这样的事情，我有点困惑。假设我需要实现各种基于网格的页面，它们的设计方式或多或少相同，但它们每个都有一些特殊性。这就是为什么我需要一些基本的抽象存储/查询服务，我打算在这些服务中实现通用逻辑。

每个网格都将使用以下子级进行操作BaseLineItem：

export interface BaseListItem {
  Id: number;
  StatusId: number;
  // Other properties
}

那就是我尝试实现它的方式

export interface PageState<TListItem extends BaseListItem> extends EntityState<TListItem> {
  // some state properties
}

export abstract class PageStore<TListItem extends BaseListItem, TState extends PageState<TListItem>> extends EntityStore<TState> {
  constructor(initialState: Partial<TState>) {
    super(initialState);
  }

  addNewItems(items: TListItem[]): void {
    this.upsertMany(items);
  }
}

假设对于每个表单，我将为订单项、状态和商店实现子项，因此我可以添加一些特定于每个表单的特性。但是在那个地方我遇到了addNewItems方法 -的问题upsertMany，它显示了以下错误：

Argument of type 'TListItem[]' is not assignable to parameter of type 'getEntityType<TState>[]'.\n  Type 'TListItem' is not assignable to type 'getEntityType<TState>'.\n    Type 'BaseListItem' is not assignable to type 'getEntityType<TState>'.

秋田似乎无法推断实体的类型。

就是那个问题。如何在不as any到处使用的情况下解决这个问题（如果我在最基础的级别开始这样做，我将在源代码中失去智能感知）？我是从.Net背景来到前端世界的。也许我不明白什么，这种架构模式在这里不是最好的？我需要一些建议。

标签： angulartypescriptangular-akitaakita

Answer 1

EntityStore.upsertMany方法将参数数组作为参数数组，EntityType[]该数组是通过使用 typescript helper 类型推断出来的

export class EntityStore<S extends EntityState = any, EntityType = getEntityType<S>,
                                                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

这是这个助手的源代码：

export type getEntityType<S> = S extends EntityState<infer I> ? I : never;
               

您在实现中使用的受约束的泛型会稍微混淆该辅助助手，并且它无法推断正确的类型并返回unknown与您的泛型类型不匹配的返回值。

也许 TypeScript 会在未来更好地推断出这种情况下的类型，但现在一个简单的解决方案是在你的代码中使用相同的 Akita 助手，而不是TListItem[]：

addNewItems(items: getEntityType<TState>[]): void {
  this.upsertMany(items);
}

您可以在Playground中进行测试

下面是派生类的示例，您可以在其中观察到正确的类型推断。

此外，您可以在Akita 问题跟踪器中查看类似问题