以字串形式取得介面或類型的鍵的方法

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>