具有泛型类型的 Typescript 扩展接口导致约束错误的子类型

Question

我有一个抽象类，其中包含在ResourceState接口中输入的默认状态值。 当我尝试将扩展State分配给抽象类的状态属性时，出现以下错误。 我尝试了许多不同的使用交集的方法，但它仍然不起作用。 我想要实现的是，我可以为 state 属性提供一个通用接口，以便我可以添加除默认值之外的更多值。

这是我得到的错误：

输入 '{ 项目：从不[]; isLoading: 假； 错误：字符串； }' 不可分配给类型 'State'。 '{ 项目：从不[]; isLoading: 假； 错误：字符串； }' 可分配给'State' 类型的约束，但'State' 可以用约束'ResourceState' 的不同子类型实例化。

这是我的代码：

 export interface BaseItem { id: string; name: string; } export interface ResourceState < Item extends BaseItem > { items: Item[]; selectedItem ? : Item; isLoading: boolean; error: string; } export abstract class Resource < Item extends BaseItem, State extends ResourceState < Item > , Mutations, Getters, Actions > { state: State = { // this is where the error occurs items: [], isLoading: false, error: '', } }

Answer 1

当你说State extends ResourceState<Item>你是说State需要符合ResourceState<Item>但因为这是一个通用类型参数，它可能不完全是ResourceState<Item> 。

想象一下：

interface MyState extends ResourceState<{ a: 123 }> {
  myCustomRequiredProperty: number
}

现在您将MyState作为State传递给您的班级，然后您使用以下MyState状态：

  state: State = { // this is where the error occurs
    items: [],
    isLoading: false,
    error: '',
  }

那么您的state变量将不会使用myCustomRequiredProperty属性构造，这是必需的。

这是打字稿（神秘地）试图告诉您的错误。

---

如果你在Resource类中构造 state 变量，那么State不应该是泛型的，因为你在这个类中的可执行代码无法知道可以泛型传入的类型的所有属性。 所以State不应该extend ResourceState<Item> ，它应该是一个ResourceState<Item> 。

那看起来像这样：

export abstract class Resource<Item extends BaseItem> {
  state: ResourceState<Item> = {
    items: [],
    isLoading: false,
    error: '',
  }
}

操场

---

但是，如果您希望能够向状态添加属性，那么没有一些初始值就无法做到这一点。 您需要以某种方式初始化那些未知的属性。 为此，您将使用上面的方法，但使用一个构造函数，该构造函数接受任何类型的完整状态，然后使用具有该信息的对象填充该类型的未知属性。

export abstract class Resource<
  Item extends BaseItem,
  State extends ResourceState<Item>
> {
  state: State

  constructor(initialState: State) {
    this.state = {
      ...initialState, // Fills in extended properties
      items: [],
      isLoading: false,
      error: '',
    }
  }
}

操场