Генератор форм

Цель

Настройка окружения

Этот проект учит настраивать окружение для работы с TypeScript — устанавливать TypeScript-компилятор и другие необходимые инструменты. Здесь же вы привыкаете к правильной инженерной культуре.

Одно из первых заданий в настройке — это подключение линтера. Линтер автоматически проверяет стиль кода, находит потенциальные ошибки и следит, чтобы код соответствовал стандартам кодирования. Такой код гораздо проще анализировать, с ним удобнее работать. Умение писать читаемый код без ошибок — это навык, который точно пригодится на собеседованиях. Кроме того, этот проект учит упаковывать свой код в пакет NPM. Упаковав код, вы сделаете его переиспользуемым — его будет проще использовать в других проектах.

Автоматизированные тесты – неотъемлемая часть профессиональной разработки. Поэтому здесь мы будет работать с генератором форм — это удобный и простой проект для написания тестов до кода. Практикуя TDD, мы можем тестировать наше приложение до его написания. Тесты помогут эффективно писать, отлаживать и рефакторить код.

Архитектура

В ходе разработки вам предстоит выполнять множество операций: парсинг входящих данных, построение формы, формирование необходимого вывода. Все это требует хорошей организации кода.

Применение знаний по TypeScript

Работая над этим проектом, вы научитесь применять знания по TypeScript на практике и лучше поймете ООП.

Описание

Генератор форм — это библиотека, которая позволяет создавать формы в шаблонах сайтов. Пример использования:

const template = { name: 'rob', job: 'hexlet', gender: 'm' };
const form = HexletCode.formFor(template, { method: 'post', url: '/users' }, (f) => {
    f.input('name');
    f.input('job', { as: 'textarea' });
    f.submit('Wow');
});

console.log(form);

// Будет выведено:
// <form action="/users" method="post">
//   <label for="name">Name</label>
//   <input name="name" type="text" value="rob">
//   <label for="job">Job</label>
//   <textarea cols="20" rows="40" name="job">hexlet</textarea>
//   <input type="submit" value="Wow">
// </form>