TypeScript抛出TS2345错误：联合类型接口需声明全部属性的问题

问题场景 #

我定义了Contact相关的事件类型，并通过ContactEvents接口将事件名与对应事件类型关联，编写泛型函数handleEvent来处理不同事件，但编译时抛出错误，提示{ contactId: 1 }无法赋值给ContactEvents[T]，因为它缺少ContactStatusChangedEvent的属性。

代码示例 #

type ContactStatus = "active" | "inactive" | "new";

interface Contact {
  id: number;
  name: string;
  status: ContactStatus;
  address: string;
}

interface ContactEvent {
  contactId: Contact["id"];
}

interface ContactDeletedEvent extends ContactEvent {}

interface ContactStatusChangedEvent extends ContactEvent {
  oldStatus: Contact["status"];
  newStatus: Contact["status"];
}

interface ContactEvents {
  deleted: ContactDeletedEvent;
  statusChanged: ContactStatusChangedEvent;
  // ... and so on
}

function handleEvent<T extends keyof ContactEvents>(
  eventName: T,
  handler: (evt: ContactEvents[T]) => void
) {
  if (eventName === "deleted") {
    handler({ contactId: 1 });
  } else {
    handler({ contactId: 1, oldStatus: "active", newStatus: "inactive" });
  }
}

handleEvent("statusChanged", (evt) => evt);

编译错误 #

src/demo.ts:44:13 - error TS2345: Argument of type '{ contactId: number; }' is not assignable to parameter of type 'ContactEvents[T]'.
  Type '{ contactId: number; }' is not assignable to type 'ContactDeletedEvent & ContactStatusChangedEvent'.
    Type '{ contactId: number; }' is missing the following properties from type 'ContactStatusChangedEvent': oldStatus, newStatus

44     handler({ contactId: 1 });
               ~~~~~~~~~~~~~~~~

问题原因 #

核心在于泛型参数T的类型收缩限制。在handleEvent函数中，T是keyof ContactEvents的子类型，但TypeScript无法在if (eventName === "deleted")分支中将T精确窄化为"deleted"——它会认为handler的参数类型是ContactEvents[T]，而这个泛型类型在当前上下文会被推断为所有可能事件类型的交集（即ContactDeletedEvent & ContactStatusChangedEvent），仅包含contactId的对象自然无法满足这个交集类型的要求。

解决方案 #

方案1：使用函数重载 #

通过函数重载明确每个事件名对应的handler参数类型，让TypeScript能精准匹配分支中的类型：

type ContactStatus = "active" | "inactive" | "new";

interface Contact {
  id: number;
  name: string;
  status: ContactStatus;
  address: string;
}

interface ContactEvent {
  contactId: Contact["id"];
}

interface ContactDeletedEvent extends ContactEvent {}

interface ContactStatusChangedEvent extends ContactEvent {
  oldStatus: Contact["status"];
  newStatus: Contact["status"];
}

interface ContactEvents {
  deleted: ContactDeletedEvent;
  statusChanged: ContactStatusChangedEvent;
}

// 函数重载声明：明确每个事件名对应的handler类型
function handleEvent(eventName: "deleted", handler: (evt: ContactDeletedEvent) => void): void;
function handleEvent(eventName: "statusChanged", handler: (evt: ContactStatusChangedEvent) => void): void;
// 函数实现
function handleEvent(eventName: keyof ContactEvents, handler: (evt: ContactEvents[keyof ContactEvents]) => void) {
  if (eventName === "deleted") {
    handler({ contactId: 1 });
  } else {
    handler({ contactId: 1, oldStatus: "active", newStatus: "inactive" });
  }
}

handleEvent("statusChanged", (evt) => evt); // 编译正常

方案2：使用类型断言 #

如果不想改动函数结构，可以在调用handler时用类型断言告诉TypeScript当前对象的正确类型：

function handleEvent<T extends keyof ContactEvents>(
  eventName: T,
  handler: (evt: ContactEvents[T]) => void
) {
  if (eventName === "deleted") {
    handler({ contactId: 1 } as ContactEvents[T]);
  } else {
    handler({ contactId: 1, oldStatus: "active", newStatus: "inactive" } as ContactEvents[T]);
  }
}

方案3：自定义类型守卫 #

通过自定义类型守卫帮助TypeScript在分支中精准收缩eventName的类型：

// 自定义类型守卫，判断eventName是否为"deleted"
function isDeletedEventName<T extends keyof ContactEvents>(eventName: T): eventName is "deleted" {
  return eventName === "deleted";
}

function handleEvent<T extends keyof ContactEvents>(
  eventName: T,
  handler: (evt: ContactEvents[T]) => void
) {
  if (isDeletedEventName(eventName)) {
    handler({ contactId: 1 });
  } else {
    handler({ contactId: 1, oldStatus: "active", newStatus: "inactive" });
  }
}

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