打字稿。在表单结构中键入键值对

Question

我正在输入一个运行良好的表单结构。然而，在字段中表单字段的验证部分发生了一些有趣的事情。

我的可视化代码会告诉我phone 常量中的验证“required2”不正确，因为它必须是“必需的”。 但是，当您查看 form 常量的字段集合中的 phonefield 项时，并没有抱怨 required2 是不允许的。 只有当我在界面中设置required时，表单常量才会失效。

我的目标是限制每个表单字段的验证，以便有人无法将键/值添加到未键入的验证字典中。

有趣的是，当我将 phonenumber 更改为 phonenumber2 时，输入将不正确。但是更改所需的密钥并不重要，因为它不是必需的。

我的界面

declare type fields           = IPhoneField | ISelectField ..etc;

export interface IPage {
  title?:               string;
  buttons?:             IButton[];
  fields:               fields[];
  showOn?:              IDictionary <string | number>;
}

export interface IForm {
  modelPreset:          IDictionary <string | number>;
  successPageConfig?:   IDictionary <string | number | boolean>;
  presentation:         pagePresentation;
  pages:                IPage[];
}

interface IField {

  label:                string;
  model:                string;
  placeholder?:         string;
  addon?:               string;
  showOn?:              IDictionary <string | number>;
  maxlength?:           number;

}

export interface IPhoneField extends IField {
  type:                 'phone';
  validation:    {
    required?:          string;
    phonenumber:        string;
  };
}

我的代码

const phone: IPhoneField = {
  "label":"Phone Number",
  "model":"phonenumber",
  "type":"phone",
  "placeholder":"Phone number",
  "validation":{
      "required2":"A phone number is required",
      "phonenumber":"Please enter a valid phone number",

    }
};

const form: IDictionary<IForm> = {
  "form1":{
      "pages":[
        {
            "fields": [
              {
                  "label":"Phone Number",
                  "model":"phonenumber",
                  "type":"phone",
                  "placeholder":"Phone number",
                  "validation":{
                    "required2":"A phone number is required",
                    "phonenumber":"Please enter a valid phone number"
                  }
              }
            ]
        }
      ]
  }
};

有人知道为什么会这样吗？是 Typescript 的 bug 吗？

查看游乐场链接： NEW playground

Answer 1

这不是 TypeScript 中的错误。您正在创建类型与其签名不同的对象，因此类型推断不起作用。

首先：phone 中的 required2 不允许在 validation 上使用，因为它是一个无关字段。它与现有的required? 字段没有任何关系。由于您使用的是类型推断，因此添加字段会导致推断的类型不同，即使对象仍然满足接口。

如果你真的想做，你可以把它标记为那个类型。由于您没有接口或类型名称，因此您必须这样做：

const phone: IPhoneField = {
  "label":"Phone Number",
  "model":"phonenumber",
  "type":"phone",
  "placeholder":"Phone number",
  "validation":{
    "required2":"A phone number is required",
    "phonenumber":"Please enter a valid phone number",
  } as { required?: string, phonenumber: string},
};

当然最好是这样：

interface IPhoneValidation {
  required?:          string;
  phonenumber:        string;
}

export interface IPhoneField extends IField {
  type:                 'phone';
  validation:           IPhoneValidation;
}

const phone: IPhoneField = {
  "label":"Phone Number",
  "model":"phonenumber",
  "type":"phone",
  "placeholder":"Phone number",
  "validation":{
    "required2":"A phone number is required",
    "phonenumber":"Please enter a valid phone number",
  } as IPhoneValidation,
}

现在，至于为什么它不抱怨表单中的错误。这是因为您的表单的验证字段根本没有得到类型检查。

由于您还没有发布 IDictionary 实现，因此要找出原因有点猜测。但是使用样板字典实现：

interface IDictionary<T> {
  [K: string]: T;
}

form 声明中出现错误，因此无法分配。重要的是要注意错误不会来自required2，这仅仅是因为您正在组合一组没有类型的深层对象，并且只在最后将它们分配给form，这就是发现无效分配的时候.您可以阅读错误消息并看到它。我明白了：

Type '{ "form1": { "pages": { "fields": { "label": string; "model": string; "type": "phone"; "placehold...' is not assignable to type 'IDictionary<IForm>'.
  Property '"form1"' is incompatible with index signature.
    Type '{ "pages": { "fields": { "label": string; "model": string; "type": "phone"; "placeholder": string...' is not assignable to type 'IForm'.
      Property 'modelPreset' is missing in type '{ "pages": { "fields": { "label": string; "model": string; "type": "phone"; "placeholder": string...'.

这是一个满嘴（并且被钳制）但在某种程度上表明内心深处存在错误。

如果您在赋值期间键入对象，您会更早地收到错误，以便更容易解析，或者如果对象满足接口，则根本不获取它们。例如：

const form: IDictionary<IForm> = {
    "form1": {
        "pages": [
            {
                "fields": [
                    {
                        "label": "Phone Number",
                        "model": "phonenumber",
                        "type": "phone",
                        "placeholder": "Phone number",
                        "validation": {
                            "required2": "A phone number is required",
                            "phonenumber": "Please enter a valid phone number"
                        } as IValidation,
                    } as IField,
                ]
            } as IPage,
        ]
    }
};

在上述情况下，一切都会正常工作，否则当它们存在时您会看到错误。

TypeScript 进行所有这些检查并且不会自动将某些内容作为具有无关字段的接口进行类型转换的原因是为了更严格地避免输入错误。如果它确实允许任何内容，您可以输入 requird 并且永远不会意识到它不是 required，因为它是一个可选字段。换句话说，{required2: ..., phonenumber: ...} 被允许作为validation 对象，但在没有类型注释的情况下不能自动识别。

如果您希望接口自动允许其他属性，您可以这样做：

interface IValidation {
  required?:          string;
  phonenumber:        string;
  [propName:string]:  any;
}

阅读“额外的财产检查”in the interface manual 了解更多信息。