TypeScript中如何将enabledColumns设为RowData键名的联合类型数组？

问题背景 #

定义了以下TypeScript类型与表格实例，希望enabledColumns字段仅接受RowData的键名组成的数组，但使用Array<keyof RowData>时出现VSCode无自动补全、输入任意字符串不报错的问题：

类型定义 #

type MyTableRowData = {
  id : string;
  name : string;
  total : number;
}

type TableDef<RowData> = {
  data: RowData[];
  columns: {
    [key in keyof RowData]: ColumnDef<key>;
  };
  enabledColumns: Array<string>; // 期望为Array<"id" | "name" | "total">
}

表格实例 #

const data : MyTableRowData[] = [
  {id: "1", name: "name1", total: 0},
  {id: "2", name: "name2", total: 10},
  {id: "3", name: "name3", total: 99},
]

const table : TableDef<MyTableRowData> = {
  data: data,
  columns: {
    id: { /* ColumnDef内容 */ },
    name: { /* ColumnDef内容 */ },
    total: { /* ColumnDef内容 */ },
  },
  enabledColumns: ["name", "total"] // 期望仅接受"id"、"name"、"total"
}

解决方案 #

方案1：严格定义类型+开启TS严格模式 #

将enabledColumns的类型改为(keyof RowData)[]，同时确保tsconfig.json中strict选项设为true（严格模式会让TypeScript更精确地推断联合类型并执行严格检查）。

修改后的TableDef：

type TableDef<RowData> = {
  data: RowData[];
  columns: {
    [key in keyof RowData]: ColumnDef<key>;
  };
  enabledColumns: (keyof RowData)[];
};

此时创建实例时，VSCode会自动补全合法键名，输入非法字符串会直接触发类型错误。

方案2：泛型参数收窄类型 #

通过额外的泛型参数明确指定允许的键名，让TypeScript的类型推断更精准：

type TableDef<RowData, Keys extends keyof RowData = keyof RowData> = {
  data: RowData[];
  columns: {
    [key in keyof RowData]: ColumnDef<key>;
  };
  enabledColumns: Keys[];
};

使用方式

• 自动推断全部键名：

const table: TableDef<MyTableRowData> = {
  data: data,
  columns: { /* ... */ },
  enabledColumns: ["name", "total"] // 自动补全所有合法键名
};

• 手动指定允许的键名（进一步限制）：

// 仅允许"name"和"total"作为enabledColumns的项
const table: TableDef<MyTableRowData, "name" | "total"> = {
  data: data,
  columns: { /* ... */ },
  enabledColumns: ["name", "total"]
};

方案3：使用readonly数组增强检查 #

TypeScript对readonly数组的类型检查更严格，能有效提升补全体验与错误提示：

type TableDef<RowData> = {
  data: RowData[];
  columns: {
    [key in keyof RowData]: ColumnDef<key>;
  };
  enabledColumns: readonly (keyof RowData)[];
};

普通数组可以直接赋值给readonly数组属性，不存在兼容性问题，同时TS会严格校验数组项的合法性。

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