Как создать универсальный класс для создания формы на JS?

Для создания универсального класса для создания формы на TypeScript, можно использовать принципы ООП (объектно-ориентированного программирования) и интерфейсы.

Первым шагом я бы создал интерфейс FormField, который определяет общие свойства и методы для всех полей формы:

interface FormField {
  label: string;
  value: any;
  render(): HTMLElement;
  getValue(): any;
  setValue(value: any): void;
}

Затем, можно создать абстрактный класс BaseField, который будет реализовывать общую логику для всех полей формы:

abstract class BaseField implements FormField {
  label: string;
  value: any;

  constructor(label: string, initialValue: any) {
    this.label = label;
    this.value = initialValue;
  }

  abstract render(): HTMLElement;

  getValue(): any {
    return this.value;
  }

  setValue(value: any): void {
    this.value = value;
  }
}

Следующим шагом я бы создал конкретные классы для различных типов полей формы, например, TextField, CheckboxField, и т.д. Каждый из этих классов должен наследоваться от BaseField и реализовывать абстрактный метод render:

class TextField extends BaseField {
  render(): HTMLElement {
    const input = document.createElement('input');
    input.type = 'text';
    input.value = this.value;

    return input;
  }
}

class CheckboxField extends BaseField {
  render(): HTMLElement {
    const input = document.createElement('input');
    input.type = 'checkbox';
    input.checked = this.value;

    return input;
  }
}

Теперь, чтобы создать форму, вы можете использовать класс Form, который будет содержать массив полей формы и основную логику для их рендеринга:

class Form {
  fields: FormField[];

  constructor() {
    this.fields = [];
  }

  addField(field: FormField): void {
    this.fields.push(field);
  }

  renderForm(): void {
    const form = document.createElement('form');

    this.fields.forEach((field) => {
      const label = document.createElement('label');
      label.textContent = field.label;

      const fieldElement = field.render();

      label.appendChild(fieldElement);
      form.appendChild(label);
    });

    document.body.appendChild(form);
  }
}

Вы можете использовать это следующим образом:

const form = new Form();

const textField = new TextField('Имя', 'John Doe');
form.addField(textField);

const checkboxField = new CheckboxField('Согласен', true);
form.addField(checkboxField);

form.renderForm();

Код выше создаст форму с полем ввода текста и чекбоксом, и добавит ее на страницу.

Таким образом, вы создали универсальный класс для создания формы на TypeScript, который позволяет добавлять разные типы полей формы и рендерить их на странице. Это гибкое и расширяемое решение, которое можно легко адаптировать под различные потребности.