TypeScript如何约束对象键对应值为string或number类型？

你可以通过TypeScript的条件类型和映射类型，约束id（或自定义键）对应的属性值必须是string或number，以下是两种实现方式：

方案一：保留id属性名 #

直接在类型中筛选出T中属性值为string或number的键，作为id的可选类型：

type DropdownProps<T> = {
  data: T[];
  // 仅允许值为string/number的键作为id
  id: { [K in keyof T]: T[K] extends string | number ? K : never }[keyof T];
};

用法示例 #

type User = {
  id: number;
  name: string;
  isActive: boolean;
};

// 合法：id对应number类型的键
const validDropdown1: DropdownProps<User> = {
  data: [{ id: 1, name: "Alice", isActive: true }],
  id: "id"
};

// 合法：id对应string类型的键
const validDropdown2: DropdownProps<User> = {
  data: [{ id: 1, name: "Alice", isActive: true }],
  id: "name"
};

// 不合法：isActive对应boolean类型，不符合约束
const invalidDropdown: DropdownProps<User> = {
  data: [{ id: 1, name: "Alice", isActive: true }],
  id: "isActive" // TypeScript会抛出类型错误
};

方案二：自定义键名（不强制用id） #

通过额外的泛型参数K指定键名，同时约束该键对应的值必须是string或number：

// K必须是T的键，且对应值为string/number
type DropdownProps<T, K extends keyof T & (T[K] extends string | number ? K : never)> = {
  data: T[];
  key: K;
};

用法示例 #

type Product = {
  sku: string;
  price: number;
  inStock: boolean;
};

// 合法：key指定为sku（值为string）
const productDropdown1: DropdownProps<Product, "sku"> = {
  data: [{ sku: "P001", price: 99, inStock: true }],
  key: "sku"
};

// 合法：key指定为price（值为number）
const productDropdown2: DropdownProps<Product, "price"> = {
  data: [{ sku: "P001", price: 99, inStock: true }],
  key: "price"
};

// 不合法：inStock对应boolean类型，不符合约束
const invalidProductDropdown: DropdownProps<Product, "inStock"> = {
  data: [{ sku: "P001", price: 99, inStock: true }],
  key: "inStock" // TypeScript会抛出类型错误
};

这两种方案都能确保你传入的键对应的属性值类型是string或number，避免出现any类型的问题。

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