如何确保字符串类型的组件Prop值为指定对象的键？

背景 #

第三方包中Input组件的简化Prop定义：

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

我的表单简化类型定义：

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

type KForm = keyof IForm

存在的问题：当我故意传入错误字符串并通过as KForm强制类型转换时，TypeScript未触发报错：

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

可选的类型校验方案 #

我整理了四种可行的类型校验方案，均能避免上述强制转换绕过校验的问题：

• 自执行函数
  通过即时执行的类型约束函数校验传入值：

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

• 抽离独立函数
  单独定义一个类型约束函数，复用性更强：

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

  使用方式：

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

• 声明独立变量
  提前声明带类型约束的变量，直接传入组件：

  const emailField: KForm = 'email';
  

  使用方式：

  ...
  <Input name={emailField} />
  ...
  

• 封装包装组件
  对第三方Input组件进行封装，直接约束name字段的类型：

  interface WrapperInputProp extends InputProps {
    name: KForm
  }
  

  使用方式：

  ...
  <WrapperInput name={'email'} />
  ...
  

补充说明 #

经测试，上述四种方案的性能差异可忽略不计。

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