如何在TypeScript中使用字符串值对接口进行类型提示？

TypeScript的接口是编译时专属概念，不存在运行时的"接口名称字符串"直接映射到类型的机制，我们需要通过编译时的类型关联逻辑来实现你的需求，以下是具体解决方案：

1. 建立字符串标识与类型的映射 #

首先定义一个类型别名，把location的字符串值和对应接口绑定起来：

interface ITest {
  location: string;
  record: Record<string, unknown>[];
}

// 定义字符串到目标类型的映射关系
type LocationToType = {
  "Victoria": ITest;
  // 后续可扩展其他location对应的类型，比如 "Paris": IParisTest
};

2. 基于条件判断实现类型推断 #

方法一：映射类型+类型断言（快速实现） #

通过映射类型获取对应类型，配合类型断言完成类型提示：

const test = {
  location: "Victoria",
  record: [
    {
      name: "matt",
      age: 29,
      is_single: false,
    }
  ]
};

if (test.location === "Victoria") {
  // 利用映射类型拿到对应接口，通过as断言指定类型
  const newMessage = test as LocationToType["Victoria"];
  // 此时newMessage会获得ITest的完整类型提示
  console.log(newMessage.record[0].name); // 编辑器会自动提示name属性
}

方法二：自定义类型守卫（严谨校验） #

如果需要更严谨的类型检查，可编写自定义类型守卫函数，确保对象符合目标类型：

// 自定义类型守卫：验证对象是否匹配指定location对应的类型
function isLocationType<T extends keyof LocationToType>(
  obj: unknown,
  location: T
): obj is LocationToType[T] {
  if (typeof obj !== "object" || obj === null) return false;
  return (obj as { location: string }).location === location;
}

// 使用示例
if (isLocationType(test, "Victoria")) {
  const newMessage = test;
  // 此处newMessage会自动被推断为ITest类型，无需手动断言
}

3. 扩展多类型场景 #

如果有多个location对应不同接口，只需扩展映射关系和类型守卫即可：

// 新增另一个接口
interface ILondonTest {
  location: string;
  record: { address: string; postcode: string }[];
}

// 更新映射关系
type LocationToType = {
  "Victoria": ITest;
  "London": ILondonTest;
};

const londonTest = {
  location: "London",
  record: [{ address: "123 St", postcode: "SW1A" }]
};

if (isLocationType(londonTest, "London")) {
  console.log(londonTest.record[0].postcode); // 正确提示postcode属性
}

核心注意点 #

• 永远不要试图用运行时的字符串变量直接作为类型名，TypeScript类型系统仅在编译时工作，运行时不存在接口实体。
• 实现的核心是在编译时建立字符串标识与类型的绑定，让TypeScript能通过字符串值自动推断出对应类型。

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