以字符串形式获取接口或类型的键的方法

Question

我有一个被定义为接口的Patient实体

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

我想要创建一个表头，它将显示我的Patient接口中的每个键，而无需在渲染函数中显式地修改它们，因为我将继续向接口中添加或删除键。

我在思考以下伪代码

<tr>
    keys of Patient.map((key) => <th>key.toString()</th>)
</tr>

问题是，我似乎无法将伪代码转换为实际代码。我尝试过使用类型和接口，并且已经尝试了一段时间，但是我似乎无法理解这个问题。

我正在努力提高对Typescript的了解，并在React中发挥其潜力，非常感谢任何帮助 :)

Answer 1

在运行时接口实际上并不存在。它们只存在于编译和linting过程中。因此，在运行时无法列出接口的键。你能做的最好的方法是为你的接口创建一个虚拟对象：

const dummyPatient: Patient = {name: "", greeting: ""}

然后获取dummyPatient的键：

<tr>
    {Object.keys(dummyPatient).map((key) => <th>{key}</th>)}
</tr>