TGViewer
<divelopers> <divelopers> @alexnozer_dev · 1.18K subscribers
Post #277 840
Семантический HTML и TypeScript

Казалось бы, что может быть общего у семантического HTML и TypeScript? Просматривая один из докладов, услышал интересную аналогию.

Есть TypeScript, который расширяет JS синтаксисом описания типов. Разработчики дают определённым структурам данных «названия», отмечая, что это не случайные данные, а «пользователь», «заказ» или «позиция в корзине».

Грамотная типизация данных даёт ряд преимуществ:

- Понятное назначение данных при чтении кода;
- Всплывающие подсказки в IDE;
- Генерация схем и типов для других сервисов и языков;
- Генерация документации с сигнатурами;
- Предотвращение некоторых ошибок на этапе разработки.

То есть разные потребители (IDE, библиотеки, сборщики, компиляторы, линтеры, скрипты) извлекают из типов полезную для себя информацию и что-то на её основе делают.

В TypeScript есть конструкция, наличие которой в коде считается плохой практикой — тип any. Он нужен в некоторых ситуациях, но в основном его использование сводит преимущества TypeScript на нет.

Аналогия с семантическим HTML такая: <div> и <span> в HTML аналогичны any в TypeScript. Если использовать только эти элементы для разметки всего на странице, то получится ничего не значащий, не «типизированный» контент.

Разные потребители (поисковые роботы, режимы чтения, браузерные расширения, средства доступности, парсеры) не извлекут для себя полезную информацию, которую извлекли бы при наличии семантических элементов.

Разница в том, что типы TypeScript более конкретные, в то время как семантика HTML-элементов достаточно абстрактная. Но даже из этого можно извлечь пользу. Есть способы дополнить HTML «типами», но об этом в другой раз.

Это не значит, что нужно заменять любые <div> и <span> чем-то другим. У этих элементов есть назначение, в рамках которого они уместны. Но не стоит использовать только их при наличии подходящих альтернатив.

#html
  • 💯 14
  • ✍ 4
  • ❤ 4
  • 👍 2
More from @alexnozer_dev
  1. Sep 23, 2026Images Preview На некоторых сайтах, где надо показывать изображения в высоком качестве, дл…
  2. Sep 21, 2026Реализация пользовательских атрибутов Под конец прошлого года я рассказывал об API пользов…
  3. Sep 14, 2026Подклассы Event вместо CustomEvent Многие библиотеки предоставляют систему событий в качес…
  4. Sep 11, 2026Эволюция стилей в темах Shopify Адам Ватан на днях поделился новостью, что Shopify выкупил…
  5. Sep 9, 2026Persistent Widgets Многие сайты не должны быть SPA. Но иногда эта архитектура продиктована…
  6. Sep 7, 2026Processing Instructions и маркеры В DOM всё представлено в виде узлов (Node) разных типов.…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →