有没有办法让 typescript 在编译时检查 kvp 有效性答案

【问题标题】：Is there a way to have typescript check for kvp validity in compile time有没有办法让 typescript 在编译时检查 kvp 有效性
【发布时间】：2020-05-25 11:20:21
【问题描述】：

我正在尝试将字段 ID 与 fieldDefinitions 交叉引用，然后在验证器中检查它们。但是，由于它们是字符串，因此很容易出错，有没有办法确保字典类型与其键之间的安全 1:1 映射？不同的组件可能有不同的字段。

type FieldDefinition = {
    [key: string]: string[]
};

然后我定义我在自定义表单验证器中签入的界面


const myField: FieldDefinition = {
    address: ['some_type'],
    city: ['some_type']
}

一个使用这些值的功能组件示例

const ExampleForm: FC = () => {
return(
  <Form formId='someid'>
    <TextInput fieldId='address' />
    <TextInput fieldId='city' />
  <Form/>
);
}

问题源于类型被定义为 string[] 可以是任何东西，字段 id 以以下形式使用：

if (formData !== undefined) {
          formData.fieldDefinition[payload.value.key] = [
            ...payload.value.value
          ];
        }
      }

TL;DR 我如何定义 fieldid 以使它们成为字典类型（键），但以一种我可以在编译时检查它们的有效性的方式编码。

【问题讨论】：

如果payload.value.value 不是一个字符串数组，那么你应该在编译过程中得到一个错误，因为你正在分配一个非字符串数组，而这个数组应该是一个字符串数组. Example

标签： reactjs typescript

【解决方案1】：

我已经解决了我的答案

export interface DefaultProps<K extends object> {
  formId: keyof K;
}

这是一个检查键的工作示例 https://codesandbox.io/s/vigilant-tharp-z9xkv 这是带有工厂的版本 https://codesandbox.io/s/stoic-ellis-e2w1o

【讨论】：