Typescript 通过 in 运算符进行类型保护

Question

我正要为此在 github 上发布一个问题，但我想我应该先在这里问。

我正在为我使用 typescript 编写的游戏开发组件实体系统。 javascript 和(据我所知)typescript 中的组件实体系统往往不是非常类型安全，我有一个想法来尝试解决这个问题。

我当前的计划是让每个依赖于多个组件的系统公开一个实体类型，该类型将具有该系统处理的实体应具有的许多属性。然后，我将在一个中心位置将所有各种实体类型收集到一个组合的实体联合类型中。

export type Entity =
    CameraManagerEntity |
    CollisionManagerEntity |
    HoleManagerEntity |
    ParentManagerEntity | ...

然后在系统中，我希望能够断言实体上有某些属性，并让 typescript 推断出，因为联合中唯一具有该属性的类型是我的系统导出的类型，那么它一定是导出的类型。

例如，导出 CameraManager

interface CameraManagerEntity {
    foo: boolean,
    bar: number
}

并且我的实体联合中没有其他类型具有 foo 参数。我的期望是，如果我有一个实体联合的实例，则制作一个断言“foo”位于该实例中的 if 语句应该足以访问该实例上的 bar 而不会出现类型错误。

function processEntity(entity: Entity) {
    if ("foo" in entity) {
        return entity.bar; // <-- Type error.
    }
}

我错过了什么吗？我认为在理想的情况下，编译器应该有足够的信息来知道我的实体对象是一个 CameraManagerEntity 。看来我的建议不起作用，因为今天存在 typescript 。有没有更好的方法来实现我想要做的事情？提前致谢。

编辑:我知道用户定义的类型保护，最好不必手动编写类型保护，因为我认为编译器应该已经拥有所有信息。

Answer 1

你想要的几乎就像 Tagged Union Type翻了个底朝天。使用标记联合类型，所有成员共享一个公共(public)字段，TypeScript 通过检查该字段的值(通常使用 switch)进行区分。但在您当前的设计中，联合类型的成员通过唯一字段的存在来区分。

我想出了一个通用类型防护，它使用属性的存在来检查实体与类型:

if (hasKeyOf<CameraManagerEntity>(entity, 'camera')) {
  return entity.camera;
}

这是完整的示例:

interface CameraManagerEntity {
  camera: string;
}

interface CollisionManagerEntity {
  collision: string;
}

type Entity = CameraManagerEntity | CollisionManagerEntity;

// Generic type guard 
function hasKeyOf<T>(entity: any, key: string): entity is T {
  return key in entity;
}

function processEntity(entity: Entity) {
  if (hasKeyOf<CameraManagerEntity>(entity, 'camera')) {
    return entity.camera;
  } else if (hasKeyOf<CollisionManagerEntity>(entity, 'collision')) {
    return entity.collision;
  } 
}

Try it in TypeScript Playground

但是您可能会考虑为您的实体系统使用标记联合类型，这可能更符合人体工程学:

interface CameraManagerEntity {
  kind: 'CameraManager';
  camera: string;
}

interface CollisionManagerEntity {
  kind: 'CollisionManager';
  collision: string;
}

type Entity = CameraManagerEntity | CollisionManagerEntity;

function processEntity(entity: Entity) {
  switch (entity.kind) {
    case ('CameraManager'): return entity.camera;
    case ('CollisionManager'): return entity.collision;
  }
}

Try it in TypeScript Playground