如何在TypeScript接口中引用动态属性？Tailwind主题类型场景

你当前的写法在TypeScript里行不通，因为接口中不能用this来做这种动态类型关联——接口是静态类型定义，无法引用自身实例的动态属性。要实现bps只能是screens键的数组这个需求，用泛型是最直接的方案。

解决方案：泛型接口+类型推导 #

先定义一个带泛型的Theme接口，让泛型捕获screens的具体键类型，再约束bps的取值范围：

export interface Theme<S extends Record<string, string>> {
  screens: S;
  bps: Array<keyof S>;
}

为了避免手动指定泛型参数的麻烦，可以写一个简单的工具函数来自动推导类型：

function createTheme<S extends Record<string, string>>(theme: Theme<S>) {
  return theme;
}

验证示例 #

• 符合约束的正确写法（无报错）：

const t = createTheme({
  screens: {
    sm: "200px",
    md: "400px"
  },
  bps: ["md"] // "md"是screens的合法键
});

• 违反约束的错误写法（TypeScript会直接报错）：

const tt = createTheme({
  screens: {
    sm: "200px",
    md: "400px"
  },
  bps: ["foo"] // "foo"不是screens的键，触发类型检查错误
});

原理说明 #

泛型S会在创建主题对象时，自动捕获screens对象的具体键类型（比如上面例子中的"sm" | "md"），然后bps被约束为这个联合类型的数组，从而实现screens和bps的动态关联。

如果你不想用工具函数，也可以手动指定泛型参数，但写法会繁琐一些：

const t: Theme<{ sm: string; md: string }> = {
  screens: {
    sm: "200px",
    md: "400px"
  },
  bps: ["md"]
};

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