> For the complete documentation index, see [llms.txt](https://race-timo.gitbook.io/typescript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://race-timo.gitbook.io/typescript/final-task.md).

# Большая задача React+TypeScript

Задача

[Вот](https://github.com/kontur-courses/typescript/tree/master/react-typescript-task) небольшое React приложение, в котором можно просматривать цены автомобилей. Для того, чтобы это приложение
 полностью заработало, нужно выполнить 3 задачи:

1. Починить типизацию компонентов Table и TableItem. Для этого стоит обратить внимание на использование Table в компоненте 
   App
   .
2. Добавить колонку "Тип ТС". В этой колонке нужно отобразить тип транспортного средства словом.
3. Написать компонент Filter. Для этого можно воспользоваться заготовкой в файле `Filter.tsx`.
   1.  компонент должен уметь задавать подстроку для названия транспортного средства и давать возможность выбирать конкретный
       тип ТС
      .
   2. при любом изменение данных в компоненте Filter нужно вызывать метод `VehicleApi.search` и изменять данные таблицы. 
      Метод `VehicleApi.search` специально сделан синхронно для упрощения
   3. для выбора типа транспортного можно воспользоваться компонентом `VehicleTypeSelect`  

IDE

Для выполнения этой задачи можно использовать [заготовленный CodeSandbox](https://codesandbox.io/s/vehicle-filter-table-task-51uil?file=/README.md) или клонировать [репозиторий](https://github.com/kontur-courses/typescript/tree/master/react-typescript-task) и выполнять его в любой IDE.

## Решение

Пример решения задачи можно посмотреть [тут](https://codesandbox.io/s/vehicle-filter-table-solution-53tym).