如何将TypeScript接口/类型的键转为字符串并在React中动态渲染表头？

TypeScript的接口是编译时类型，编译后会被完全移除，所以你没法直接在运行时获取接口的键来生成表头。要实现接口更新时表头自动同步，需要结合运行时数组和TypeScript的类型约束来实现：

步骤1：创建与接口绑定的运行时键数组 #

首先定义一个包含接口所有键的数组，并用keyof Patient约束数组元素的类型，这样当接口修改时，TypeScript会强制你同步这个数组：

export interface Patient {
  name: string;
  greeting: string;
}

// 用keyof约束数组，确保元素都是Patient的有效键
const PATIENT_KEYS: (keyof Patient)[] = ['name', 'greeting'];

如果使用TypeScript 4.9及以上版本，推荐用satisfies关键字做更严格的类型检查，同时保留数组的字面量类型：

const PATIENT_KEYS = ['name', 'greeting'] as const satisfies readonly (keyof Patient)[];

步骤2：在React组件中遍历数组生成表头 #

现在你可以直接在JSX中遍历这个数组来生成表头，接口更新时，只要同步修改PATIENT_KEYS数组（TypeScript会报错提示你），表头就会自动更新：

import React from 'react';

export interface Patient {
  name: string;
  greeting: string;
}

const PATIENT_KEYS: (keyof Patient)[] = ['name', 'greeting'];

const PatientTable = ({ patients }: { patients: Patient[] }) => {
  return (
    <table>
      <thead>
        <tr>
          {/* 遍历键数组生成表头 */}
          {PATIENT_KEYS.map((key) => (
            <th key={key}>{key}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {/* 同样可以用数组遍历生成表格内容 */}
        {patients.map((patient, idx) => (
          <tr key={idx}>
            {PATIENT_KEYS.map((key) => (
              <td key={key}>{patient[key]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default PatientTable;

核心原理 #

• 运行时数组是实际存在的JS变量，能被React渲染时读取。
• TypeScript的keyof类型约束保证数组元素和接口键完全匹配，接口修改时会触发编译错误，强制你同步数组，从而实现表头与接口的自动同步。

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