TypeScript泛型函数logVisitorInfo类型收窄失效问题求解

问题原因 #

你遇到的核心问题是：泛型参数T是keyof VisitorType的宽泛约束，TypeScript无法将type的具体值与info的类型做精准关联收窄——因为T可能是'registeredUser' | 'anonymous'这类联合类型，即便你判断了type === 'registeredUser'，编译器也没法确定当前泛型T对应的info就是注册用户的类型。

推荐解决方案：使用判别式联合类型 #

最简洁且契合TypeScript类型系统设计的方式，是把type和对应的info定义成判别式联合类型，让编译器能自动根据type的值收窄info的类型：

// 定义判别式联合类型，将type和info的类型绑定
type Visitor =
  | { type: 'registeredUser'; info: { ip: string; username: string } }
  | { type: 'anonymous'; info: { ip: string } };

const logVisitorInfo = (visitor: Visitor) => {
  if (visitor.type === 'registeredUser') {
    // 此时info自动收窄为注册用户类型，可安全访问username
    const username = visitor.info.username;
    console.log('Registered user:', username, visitor.info.ip);
  } else {
    // 这里info自动收窄为匿名用户类型
    console.log('Anonymous user IP:', visitor.info.ip);
  }
};

保留泛型的替代方案：自定义类型守卫 #

如果必须保留泛型写法，可以通过自定义类型守卫函数，手动告诉编译器type和info的关联关系：

type VisitorType = {
  registeredUser: { ip: string; username: string };
  anonymous: { ip: string };
};

// 自定义类型守卫，判断当前info是否为注册用户类型
function isRegisteredUser<T extends keyof VisitorType>(
  type: T,
  info: VisitorType[T]
): info is VisitorType['registeredUser'] {
  return type === 'registeredUser';
}

const logVisitorInfo = <T extends keyof VisitorType>({ type, info }: { type: T; info: VisitorType[T] }) => {
  if (isRegisteredUser(type, info)) {
    // 类型守卫生效，info被收窄为注册用户类型
    const username = info.username;
    console.log(username);
  }
};

不推荐方案：直接使用类型断言 #

虽然可以用info as VisitorType['registeredUser']强行断言类型，但这种写法会绕过TypeScript的类型检查，失去了类型系统的意义，除非你能100%保证代码逻辑的正确性，否则不建议使用。

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