如何基于Table组件columns的label值为data做TypeScript类型约束？

我需要实现TypeScript类型定义，让一个接口的属性完全匹配另一个接口数组中指定字段的唯一值。示例如下：

// 期望的类型结构
interface IHeader extends Array<{header: string, label: string}> {}
interface IData extends Array<{ /* 属性必须是header字段的值 */ }> {}

// 示例场景
const columns: IHeader = [
  {header: "age", label: "Age"},
  {header:"name", label: "Name"},
  {header: "date", label: "Date"},
]
// 期望的约束效果
const data: IData = [
  {age: "24", name: "some guy", date: "monday"}, // 合法：属性与columns.header完全匹配
  {age: "24", name: "some guy"}, // 错误：缺少'date'字段
  {age: "24", name: "some guy", date: "monday", location: "1234 street"} // 错误：存在无效属性'location'
]

核心疑问：如何提取数组中所有header（实际场景为label）的唯一值作为目标对象的属性名？这种约束是否可行？

补充场景：组件Props中的类型约束问题 #

单独定义columns时的方案有效，但需要将该约束应用到组件Props中，当前实现无法触发预期的编译错误：

Page.ts

export default function Page() {
  return (
    <Table
      columns={[
        {label: "name", align: "left"},
        {label: "date", align: "right"}
      ]}
      data={[
        {name: "me", date: "monday"},
        {name: "me", date: "tuesday", location: "1234 some place"} // 未触发编译错误：无效属性'location'未被检测
      ]}
    />
  )
}

Table.ts

type Header = ReadonlyArray<{label: string, align: string}> 
type Data<T extends Header> = ReadonlyArray<Record<T[number]['label'], string>>

// 尝试定义Props但失败
/**
interface TableProps extends DefaultTableProps {
  columns: Header,
  data: Data<typeof columns> // 错误：找不到columns
}
**/

// 当前实现：无编译错误，但无法约束Page.ts中的data属性
export default function Table(props: {columns: Header, data: Data<typeof columns>}) { 
  const [orderBy, setOrderBy] = useState<keyof Data<typeof props.columns>>(/* ... */);
  return (/* 表格渲染内容 */)
}

期望目标：定义包含columns和data正确类型约束的TableProps接口（需扩展默认Props），实现当data存在多余/缺失属性时，编译器能准确发出警告。

解决方案：使用泛型绑定columns与data的类型关联 #

要实现这种动态的类型约束，核心是利用TypeScript的泛型将columns的类型和data的类型绑定在一起，让编译器能根据传入的columns自动推导data的合法属性。

1. 定义泛型TableProps接口 #

将columns的类型作为泛型参数，让data的类型依赖于该参数：

import { DefaultTableProps } from './your-path';

// 单个列的类型定义（明确label为字符串字面量类型）
type Column = Readonly<{label: string, align: string}>;

// 泛型Props接口：T是columns的具体类型（包含字面量label）
interface TableProps<T extends Column[]> extends DefaultTableProps {
  columns: Readonly<T>;
  // 约束data的每一项必须严格包含所有label作为属性，且无额外属性
  data: ReadonlyArray<{ [K in T[number]['label']]: string }>;
}

2. 将组件定义为泛型函数 #

让Table组件接收泛型参数，这样编译器就能从传入的columns自动推导T的类型，进而约束data：

import { useState } from 'react';

export default function Table<T extends Column[]>(props: TableProps<T>) {
  // 推导排序字段的合法类型：只能是columns中的label值
  const dataKeys = props.columns.map(col => col.label) as T[number]['label'][];
  const [orderBy, setOrderBy] = useState<T[number]['label']>(dataKeys[0]);

  return (
    {/* 表格渲染逻辑 */}
    <table>
      <thead>
        <tr>
          {props.columns.map(col => (
            <th key={col.label} align={col.align}>{col.label}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {props.data.map((row, idx) => (
          <tr key={idx}>
            {props.columns.map(col => (
              <td key={col.label} align={col.align}>{row[col.label]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

3. 验证约束效果 #

此时在Page.ts中传入不符合要求的data，编译器会立即报错：

export default function Page() {
  return (
    <Table
      columns={[
        {label: "name", align: "left"},
        {label: "date", align: "right"}
      ]}
      data={[
        {name: "me", date: "monday"}, // 合法
        {name: "me"}, // 错误：缺少'date'属性
        {name: "me", date: "tuesday", location: "1234 some place"} // 错误：存在未知属性'location'
      ]}
    />
  )
}

关键说明 #

• 必须让label被推导为字符串字面量类型，而不是宽泛的string类型。如果直接用type Column = {label: string}，TypeScript会将label视为string，无法提取具体的属性名。通过在组件调用时传入字面量数组（如[{label: "name", ...}]），编译器会自动保留字面量类型。
• 使用{ [K in T[number]['label']]: string }而非Record，因为Record允许额外属性，而索引签名配合--strict模式（或strictPropertyInitialization）会禁止多余属性。

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