一个接口中的多个泛型

Question

我正在尝试制作某种解析器，用于解析数据字段，并将其制成完整的形式并进行显示。 fields 属性将定义客户端将从url 属性IForm 接收的json 数据数组中的每个字段

表单界面示例如下：

export interface IForm {
    name: string;
    url: string;
    fields: IField<any>[] // <-- What is the proper type of this?
}

export interface IField<T> {
    name: string;
    label: string;
    mandatory?: boolean;
    default: T;
}

export interface IInput<T> extends IField<T> {
    type: 'input'
}

export interface IOptionsUrl {
    url: string;
    idField: string;
    labelField: string;
}

export interface IOptionsList<T> {
    id: T;
    label: string;
}

export interface IOptions<T> extends IField<IOptionsList<T>> {
    type: 'options';
    options?: IOptionsUrl | IOptionsList<T>[] | string[];
    multiple?: boolean;
}

export interface ICheckbox extends IField<boolean> {
    type: 'checkbox'
}

IForm 的fields 属性将包含多个类型，例如IField<string> 或IField<number> 等。它们由每种类型中的type 属性确定，全部基于 IField。所以我不确定是否应该输入<any>，因为它将在数组中包含多种类型的数据。定义它的正确方法是什么？还是我应该一起跳过泛型而只使用任何泛型？

样本数据如下：

let meta: IForm = {
    name: 'employee',
    url: '/api/employee',
    fields: [
        {
            type: 'input',
            name: 'id',
            label: 'Employee ID',
            default: 0,
            mandatory: true
        },
        {
            type: 'input',
            name: 'name',
            label: 'Employee Name',
            default: '',
            mandatory: true
        },
        {
            type: 'options',
            name: 'gender',
            label: 'Male/Female',
            default: 'male',
            options: ['Male', 'Female']
        },
        {
            type: 'checkbox',
            name: 'active',
            label: 'Active',
            default: true
        },
        {
            type: 'options',
            name: 'department',
            label: 'Department',
            default: 0,
            options: {
                url: '/api/departments',
                idField: 'id',
                labelField: 'name'
            }
        }
    ]
}

员工界面将是：

export interface IEmployee {
    id: number;
    name: string;
    gender: string;
    active: boolean;
    department: number;
}

我应该如何定义 IForm 的接口？

谢谢

Answer 1

我建议，至少考虑到上述信息，您可以这样做：

type PossibleDataTypes = string | number | boolean; // or whatever you want

type PossibleFields =
  | IInput<PossibleDataTypes>
  | IOptions<PossibleDataTypes>
  | ICheckbox;

export interface IForm {
  name: string;
  url: string;
  fields: Array<PossibleFields>;
}

在这里，我们将field 缩小为仅包含您期望的字段类型的数组。您可以根据需要添加到此列表中。

顺便说一句，我又做了一个改动：

// changed this from IField<IOptionsList<T>> to just IOptionsList<T>
export interface IOptions<T> extends IField<T> {
  type: "options";
  options?:
    | IOptionsUrl
    | ReadonlyArray<IOptionsList<T>>
    | ReadonlyArray<string>;
  multiple?: boolean;
}

因为没有它，您的 meta 变量不匹配。另外我认为meta 有一个错字，它使用data 而不是url。无论如何，您可以将meta 定义为IForm，但是将变量扩大到IForm 会使其忘记细节（例如您正在使用的特定字段类型）。如果您只想验证 meta 匹配 IForm 而不将其扩大到 IForm，您可以使用这样的辅助函数：

const asIForm = <F extends IForm>(f: F) => f;

然后像这样使用它

const meta = asIForm({
  name: "employee",
  url: "/api/employee",
  fields: [
    {
      type: "input",
      name: "id",
      label: "Employee ID",
      default: 0,
      mandatory: true
    },
    {
      type: "options",
      name: "gender",
      label: "Male/Female",
      default: "male",
      options: ["Male", "Female"]
    },
    {
      type: "checkbox",
      name: "active",
      label: "Active",
      default: true
    },
    {
      type: "options",
      name: "department",
      label: "Department",
      default: 0,
      options: {
        url: "/api/departments",
        idField: "id",
        labelField: "name"
      }
    }
  ]
});

现在，鉴于PossibleFields 是具体的discriminated union，您可以让编译器通过类型保护来缩小每个field 条目，如下所示：

function processForm(form: IForm) {
  for (let field of form.fields) {
    switch (field.type) {
      case "input": {
        // do something for input
        break;
      }
      case "checkbox": {
        // do something for checkbox
        break;
      }
      case "options": {
        // do something for options
        field.options // <-- no error, known to exist
        break;
      }
      default:
        ((x: never) => console.log("WHAT IS" + x))(field); // guarantee exhaustive
        // If an error appears here -------------> ~~~~~
        // then you missed a case in the switch statement
    }
  }
}

好的，希望对您有所帮助。祝你好运！

Link to code

Answer 2

如果你想限制类型使用Type Union:

type formType = string | number | boolean | date;
export interface IForm {
  name: string;
  url: string;
  fields: IField<formType>[] // <-- What is the proper type of this?
}



let form.default = "adsf";     //valid
let form.default = 1;          //valid
let form.default = true;       //valid
let form.default = new date(); //valid
let form.default = null;       //in-valid
let form.default = undefined;  //in-valid
let form.default = never;      //in-valid