TypeScript如何定义接口，使defaultKey为dictionnary的合法键？

你原来的写法无法生效，核心原因是接口定义阶段无法通过this动态捕获实例中字典的具体键类型——对于字符串索引签名{[k:string]:any}，keyof this['dictionnary']只会返回string，完全起不到约束作用。要实现defaultKey必须是字典的有效键，需要用泛型来关联两个属性的类型：

基础泛型接口方案 #

针对你最初的I接口，可以定义带泛型的接口，用泛型参数约束字典的键类型：

interface I<K extends string = string> {
  dictionary?: Record<K, any>;
  defaultKey?: K;
}

// 合法示例：指定具体键类型
const validObj: I<'a' | 'b'> = {
  dictionary: { a: 1, b: 2 },
  defaultKey: 'a'
};

// 非法示例：输入不存在的键会报错
const invalidObj: I<'a' | 'b'> = {
  dictionary: { a: 1, b: 2 },
  defaultKey: 'c' // 类型错误：'"c"'不能赋值给类型'"a" | "b"'
};

主题配置场景的具体实现 #

对于主题配置的例子，用泛型捕获availableThemes的具体键，结合satisfies关键字还能让TS自动推断类型，无需手动指定泛型：

interface Theme { color: string }

// 泛型接口，T约束availableThemes的键类型
interface Themes<T extends string = string> {
  availableThemes: Record<T, Theme>;
  defaultTheme: T;
}

// 自动推断泛型并校验
const themes = {
  availableThemes: {
    red: { color: 'red' },
    green: { color: 'green' },
    blue: { color: 'blue' },
  },
  defaultTheme: 'red' // 合法，TS会自动校验是否为availableThemes的键
} satisfies Themes;

// 输入错误键会直接报错
const invalidThemes = {
  availableThemes: {
    red: { color: 'red' },
    green: { color: 'green' },
    blue: { color: 'blue' },
  },
  defaultTheme: 'yellow' // 类型错误：'"yellow"'不能赋值给类型'"red" | "green" | "blue"'
} satisfies Themes;

更灵活的函数封装方案 #

如果不想手动维护泛型接口，还可以用泛型函数创建对象，TS会自动推断字典的键类型并约束defaultKey：

interface Theme { color: string }

function createThemes<T extends Record<string, Theme>>(config: {
  availableThemes: T;
  defaultTheme: keyof T;
}) {
  return config;
}

// 调用时自动校验defaultTheme的合法性
const themes = createThemes({
  availableThemes: {
    red: { color: 'red' },
    green: { color: 'green' },
    blue: { color: 'blue' },
  },
  defaultTheme: 'red' // 合法
});

const invalidThemes = createThemes({
  availableThemes: {
    red: { color: 'red' },
    green: { color: 'green' },
    blue: { color: 'blue' },
  },
  defaultTheme: 'yellow' // 类型报错
});

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