如何確保字符串是接受字符串的道具中 object 的鍵之一？

Question

這是來自 package 的組件的流線型 prop 定義（我不控制）。

interface InputProps {
  name: string,
  value?: string
}

這是我的表單的流線型類型定義。

interface IForm {
  name: string,
  email: string,
}

type KForm = keyof IForm

這是我的代碼，我故意放了一個錯誤的字符串，但它沒有顯示錯誤。

...
 <Input name={'emailx' as KForm} />
...

我有以下檢查類型的解決方案，但我不知道這是否是一個好習慣。

1. 自執行 function

...
 <Input name={((k: KForm)=>k)('email')} />
...

2. 同上，但在別處分開。

const getFieldName = (k: KForm) => k;

...
 <Input name={getFieldName('email')} />
...

3. 聲明單獨的變量。

const emailField: KForm = 'email';
...
 <Input name={emailField} />
...

4. 一個包裝組件。

interface WrapperInputProp extends InputProp {
  name: KForm
}
...
<WrapperInput name={'email'} />

Answer 1

在我看來，選項 4 是最好的，其次是選項 3。這兩個選項都在編譯時提供 static 類型檢查。