如何在TypeScript中用联合类型键安全动态访问对象属性？

问题场景 #

用户对象包含可选的不同社交媒体账户（email、google、twitter），每种账户的用户名存储在专属键中：

• Email账户用address
• Google账户用name
• Twitter账户用username

尝试通过传入社交类型参数的函数动态获取用户名，原代码如下：

interface Email {
  address: string;
}
interface Google {
  name: string;
}
interface Twitter {
  username: string;
}

interface User {
  email?: Email;
  google?: Google;
  twitter?: Twitter;
}
function getUsername(social: "email" | "google" | "twitter", user: User) {
  const userUsernames = {
    email: "address",
    google: "name",
    twitter: "username",
  } as const;
  const socialAccount = user[social];

  const username = socialAccount ? socialAccount[userUsernames[social]] : null;
  return username
}

但遇到TypeScript类型错误：

元素隐式拥有'any'类型，因为类型为'"address" | "name" | "username"'的表达式不能用于索引类型'Email | Google | Twitter'

已知可以用if/switch分支逐个处理类型，但希望实现无需显式分支的动态类型安全访问。

解决方案：用泛型+类型映射建立关联 #

核心思路是通过类型映射让TypeScript明确社交平台、账户类型、用户名属性键三者的对应关系，而非让它们处于无关联的联合类型状态。

步骤1：重构类型定义，建立平台-账户的映射 #

先定义一个统一的社交平台类型映射，把每个平台对应的账户结构绑定在一起：

// 定义每个社交平台对应的账户结构
type SocialPlatforms = {
  email: { address: string };
  google: { name: string };
  twitter: { username: string };
};

// 基于映射自动生成User类型，避免重复定义
type User = {
  [Platform in keyof SocialPlatforms]?: SocialPlatforms[Platform];
};

步骤2：用泛型函数实现动态类型安全访问 #

通过泛型参数K绑定传入的社交平台类型，让TypeScript能推断出该平台对应的账户类型和属性键：

// 常量映射：平台对应的用户名属性键
const socialUsernameKeys = {
  email: "address",
  google: "name",
  twitter: "username",
} as const;

// 泛型函数，K代表具体的社交平台类型
function getUsername<K extends keyof SocialPlatforms>(social: K, user: User) {
  const account = user[social];
  if (!account) return null;
  // 此时TypeScript能推断出socialUsernameKeys[social]与account的属性键完全匹配
  return account[socialUsernameKeys[social]];
}

效果验证 #

调用函数时，TypeScript会自动校验参数并推断返回值类型：

const testUser: User = {
  email: { address: "test@example.com" },
  google: { name: "test_google" }
};

// 返回类型为string | null，且能正确获取值
const emailName = getUsername("email", testUser); // "test@example.com"
const googleName = getUsername("google", testUser); // "test_google"
const twitterName = getUsername("twitter", testUser); // null

原理说明 #

原代码的问题在于：socialAccount是Email | Google | Twitter的联合类型，userUsernames[social]是"address" | "name" | "username"的联合类型，TypeScript无法确定这两个联合类型的成员是一一对应的（比如无法保证当socialAccount是Email时，索引键一定是address），因此只能推断为any类型。

而泛型+类型映射的方式，让TypeScript明确知道：当传入的social是具体的K类型时，user[social]必然是SocialPlatforms[K]，socialUsernameKeys[social]必然是该类型的有效属性键，从而实现了动态访问的类型安全。

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