TypeScript接口：如何描述「接口的属性」类型？

嘿，这个痛点我太熟悉了——硬编码属性字符串确实是个隐患，哪天接口T改了，很容易出现漏改导致的运行时问题。不过TypeScript早就为这种场景准备了完美的解决方案，核心就是用keyof操作符来实现类型的自动绑定！

核心思路：用keyof提取接口的属性联合类型 #

你可以定义一个泛型类型，让targetProperty的类型直接关联到T的键名，这样T的属性变化时，targetProperty的可选值会自动同步更新，完全不需要手动维护字符串：

// 定义一个泛型配置类型，targetProperty的类型是T的所有键名组成的联合类型
type TargetConfig<T> = {
  targetProperty: keyof T;
  // 这里可以添加其他你需要的配置属性
};

实际使用示例 #

假设你的接口T是{ a: string, b: boolean }，我们来看看具体怎么用：

// 你的目标接口
interface MyType {
  a: string;
  b: boolean;
}

// 创建配置时，targetProperty只能是'a'或'b'
const validConfig: TargetConfig<MyType> = {
  targetProperty: 'a' // ✅ 完全合法
};

// 如果尝试写不存在的属性名，TypeScript会直接在编译期报错
const invalidConfig: TargetConfig<MyType> = {
  targetProperty: 'c' // ❌ 报错：类型'"c"'不能赋值给类型'"a" | "b"'
};

进阶：安全操作属性值 #

如果还要通过targetProperty访问对象的属性值，我们可以结合泛型和keyof写一个类型安全的工具函数，连返回值的类型都会自动推导：

function getTargetValue<T, K extends keyof T>(item: T, targetProperty: K): T[K] {
  return item[targetProperty];
}

const myItem: MyType = { a: "Hello World", b: true };
const valueA = getTargetValue(myItem, 'a'); // 类型自动推导为string
const valueB = getTargetValue(myItem, 'b'); // 类型自动推导为boolean

为什么这个方案可靠？ #

• 自动同步接口变更：如果之后你给MyType新增了属性c: number，keyof MyType会自动变成'a' | 'b' | 'c'，targetProperty的可选值也会同步更新，完全不需要手动修改代码。
• 编译期校验：所有不合法的属性名都会在编译阶段被TypeScript拦截，从根源上避免了运行时错误。
• 类型推导完整：不仅属性名被约束，连属性值的类型也能完美匹配，让你的代码全程享受TypeScript的类型安全保障。

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