TypeScript如何实现values数组元素作为valuesMap键的类型约束

问题原因 #

你原先的写法没有触发预期类型错误的核心原因是：你直接把FilterOption定义为FilterOptionBase<string>，泛型参数K被固定为最宽泛的string类型，valuesMap的键约束自然失效，TS 无法将你传入的values数组元素窄化为具体的字面量联合类型。

解决方案 #

要实现你的两个需求，需要保留values数组的字面量类型信息，同时通过联合类型实现isBoolean和valuesMap值类型的关联约束，推荐两种实现方案：

方案1：泛型工厂函数（兼容性更好）

通过工厂函数自动推导values的字面量类型，无需手动指定泛型参数：

type FilterOptionBase<K extends string> = 
  // isBoolean为false或不传的分支
  | {
      name: string;
      values: K[];
      multiselect: boolean;
      isBoolean?: false;
      valuesMap?: { [key in K]: string | boolean };
    }
  // isBoolean为true的分支
  | {
      name: string;
      values: K[];
      multiselect: boolean;
      isBoolean: true;
      valuesMap?: { [key in K]: boolean };
    }

// 工厂函数，自动推导泛型K的类型
function createFilterOption<K extends string>(option: FilterOptionBase<K>) {
  return option;
}

// 错误示例1：valuesMap出现非values内的键，会触发类型错误
const myBadFilter = createFilterOption({
    name: 'Status',
    values: ["Online", "Offline"],
    multiselect: false,
    valuesMap: {
        Online: true,
        NotSure: false // 报错：对象字面量只能指定已知属性，"NotSure"不存在于预期类型中
    }
})

// 错误示例2：isBoolean为true时valuesMap出现字符串值，会触发类型错误
const booleanFilter = createFilterOption({
    name: 'Status',
    values: ["Online", "Offline"],
    multiselect: false,
    isBoolean: true,
    valuesMap: {
        Online: true,
        Offline: "false" // 报错：不能将类型"string"分配给类型"boolean"
    }
})

// 正确示例
const goodFilter = createFilterOption({
    name: 'Status',
    values: ["Online", "Offline"],
    multiselect: false,
    isBoolean: true,
    valuesMap: {
        Online: true,
        Offline: false
    }
})

方案2：satisfies操作符（TS 4.9+支持）

如果不想额外定义工厂函数，可以用satisfies配合as const实现类型约束：

type FilterOptionBase<K extends string> = 
  | {
      name: string;
      values: readonly K[];
      multiselect: boolean;
      isBoolean?: false;
      valuesMap?: { [key in K]: string | boolean };
    }
  | {
      name: string;
      values: readonly K[];
      multiselect: boolean;
      isBoolean: true;
      valuesMap?: { [key in K]: boolean };
    }

const myFilter = {
    name: 'Status',
    values: ["Online", "Offline"] as const,
    multiselect: false,
    valuesMap: {
        Online: true,
        NotSure: false // 触发类型错误
    }
} satisfies FilterOptionBase<typeof myFilter.values[number]>

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