Проверка типа интерфейса в TypeScript
- 30 мая 2023
Проверка типов интерфейса — одна из ключевых возможностей TypeScript. Она помогает убедиться, что объект или класс содержат необходимый набор свойств и методов, указанных в интерфейсе. Благодаря проверке типов вы можете писать более надёжный код, ведь часть ошибок будет найдена ещё на этапе компиляции.
В чём разница между интерфейсами и типами
Проверка типов объектов
Тип интерфейса проверяется с помощью оператора двоеточия :. Чтобы проверить тип объекта на соответствие определённому интерфейсу, нужно выполнить следующие шаги.
Определить интерфейс, описывающий структуру объекта. Указать свойства и их типы. Например, ниже мы создаём интерфейс Person, который имеет свойства name (строка), age (число) и email (строка):
interface Person {
name: string;
age: number;
email: string;
}
Создать объект, который соответствует интерфейсу. Объект должен содержать все указанные в интерфейсе свойства и иметь соответствующие типы данных:
const person: Person = {
name: "Иван Иванов",
age: 30,
email: "ivan@example.com"
};
Проверить тип объекта, передав его в функцию или присвоив переменной с объявленным типом интерфейса. Если объект не соответствует интерфейсу, TypeScript выдаст ошибку компиляции.
function greetPerson(person: Person) {
console.log(`Привет, ${person.name}!`);
}
greetPerson(person); // Вывод: Привет, Иван Иванов!
В этом примере мы объявляем функцию greetPerson. Она принимает аргумент типа Person (интерфейс) и выводит приветствие с именем человека. В нашем случае всё работает как нужно, поэтому мы видим в консоли Привет, Иван Иванов!. Но если бы в поле age были данные типа string, проверка бы не прошла. Мы бы получили ошибку.
💡 Узнайте больше о теории типов, научитесь на практике использовать аннотацию типов и обобщённое программирование на профессиональном курсе по TypeScript.
Проверка типов классов
В этом случае TypeScript проверяет, что классы соответствуют ожидаемой структуре и типам данных, определённым в интерфейсе. Посмотрим пример:
interface Animal {
name: string;
age: number;
makeSound(): void;
}
class Dog implements Animal {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
makeSound() {
console.log("Гав!");
}
}
class Cat implements Animal {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
makeSound() {
console.log("Мяу!");
}
}
const dog: Animal = new Dog("Шарик", 5);
const cat: Animal = new Cat("Кексик", 3);
dog.makeSound(); // Вывод: Гав!
cat.makeSound(); // Вывод: Мяу!
У нас есть интерфейс Animal, который определяет свойства name (строка), age (число) и метод makeSound. Мы создаём два класса — Dog и Cat — которые реализуют интерфейс Animal. Каждый класс имеет свою реализацию метода makeSound: собака лает — Гав!, а кошка мяукает — Мяу!. Далее мы создаём экземпляры классов Dog и Cat, присваивая им тип Animal. Это возможно, так как классы Dog и Cat соответствуют интерфейсу Animal и у них есть все необходимые свойства и методы.
После этого мы вызываем метод makeSound на объектах dog и cat и видим в консоли звуки для каждого животного.
Проверка типов функций
Интерфейсы также используются для проверки типов аргументов и возвращаемых значений функций. Здесь всё как с объектами или классами:
interface Calculator {
add(a: number, b: number): number;
}
const myCalculator: Calculator = {
add(a, b) {
return a + b;
}
};
const result = myCalculator.add(5, 3); // result = 8
console.log(result); // Вывод: 8
В этом примере мы создаём интерфейс Calculator. Он определяет функцию add с двумя аргументами типа number и возвращаемым значением — тоже типа number. Далее мы создаём объект myCalculator, который реализует интерфейс Calculator и определяет функцию add. Затем мы вызываем функцию add с аргументами 5 и 3 и получаем результат — 8.
В чём польза проверки типов
Создаёт правильный рабочий процесс. Разработчикам приходится заранее определять типы данных и интерфейсы, чтобы явно указать ожидаемую структуру и поведение кода. То есть сначала продумывается интерфейс и лишь затем пишется сам код. Это делает взаимодействие между компонентами программы более чётким и понятным.
Делает код надёжным. Некоторые ошибки можно найти и исправить на ранней стадии разработки, ещё до запуска программы.
Облегчает поддержку и масштабирование кода. Поскольку типы данных и требования к структуре объектов явно определены в интерфейсах, другим разработчикам удобно взаимодействовать с определёнными объектами.
Улучшает производительность. TypeScript может использовать информацию о типах для предварительной оптимизации кода. Как результат, программа будет работать быстрее.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
HTTP/3: зачем он нужен и как понять, что он работает
HTTP/3 — это новая версия протокола обмена данными между браузером и сервером. В отличие от предыдущих HTTP/1.1 и HTTP/2, он построен поверх протокола QUIC и использует UDP вместо TCP. Это делает соединения быстрее, стабильнее и безопаснее.
HTTP/3 доступен в Baseline в статусе «Newly Available» с 2024-09-16.
Чем HTTP/3 лучше
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- Быстрее устанавливается соединение. Больше нет отдельной стадии TLS: всё объединено.
- Меньше задержек. Даже при потере пакета браузер не ждёт восстановления всего потока, как в TCP.
- Устойчивость к переключениям сети. QUIC сохраняет соединение, даже если пользователь, например, переключился с Wi-Fi на LTE.
- Безопасность по умолчанию. Все соединения — только через шифрование (TLS 1.3).
Эти преимущества особенно важны для мобильных пользователей и тех, кто часто сталкивается с нестабильным интернетом.
Как работает
HTTP/3 основан на QUIC — это транспортный протокол от Google, который работает через UDP. Он умеет передавать данные параллельно по разным потокам, не блокируя друг друга при сбоях. QUIC внедрён в современные браузеры и серверные платформы.
Нужно ли что-то делать?
Если вы разработчик сайта или веб-приложения, то скорее всего ничего специально делать не нужно — браузер сам выберет HTTP/3, если сервер его поддерживает. Ваш сайт будет работать быстрее просто потому, что инфраструктура на это перешла.
Если вы настраиваете сервер (например, NGINX или Cloudflare), тогда стоит включить поддержку HTTP/3. На популярных платформах это можно сделать одной строчкой.
Как проверить, используется ли HTTP/3
В Chrome или Edge:
- Откройте DevTools → вкладка Network.
- Перезагрузите страницу.
- Добавьте колонку Protocol (правый клик по шапке таблицы).
- Посмотрите, есть ли
h3у запросов — это и есть HTTP/3.
Через терминал (если у вас установлен curl):
curl -I --http3 https://example.com
Если сервер не поддерживает HTTP/3, будет ошибка или произойдёт откат на HTTP/2.
Через JavaScript
На уровне кода нельзя напрямую узнать версию протокола, но можно сделать fetch и посмотреть заголовки ответа через инструменты разработчика:
fetch('https://example.com')
.then(response => console.log(response.headers))
А затем проверить в DevTools, какой протокол был использован.
Что важно помнить
- HTTP/3 — это не «фича», которую вы вызываете в коде, а часть транспортного уровня.
- Он поддерживается большинством современных браузеров: Chrome, Firefox, Edge, Safari.
- Но он работает только с HTTPS, как и HTTP/2.
Заключение
HTTP/3 делает интернет быстрее, безопаснее и стабильнее — особенно на слабых сетях и мобильных устройствах. Вам не нужно менять HTML, JavaScript или CSS, чтобы получить преимущество. Главное — чтобы сервер и хостинг поддерживали эту технологию.
Если вы разрабатываете сайт с упором на производительность — убедитесь, что HTTP/3 включён. Это шаг вперёд к более отзывчивым и доступным интерфейсам.
Больше обзоров веб-функций — в телеграм-канале HTML Academy.
Нашли ошибку или опечатку? Напишите нам.
- 27 июля 2025
10 приёмов работы с console, которые должен знать каждый разработчик
Консоль разработчика — важный инструмент отладки в JavaScript. С помощью методов console можно выводить информацию о работе скрипта, отслеживать ошибки, логировать данные и анализировать производительность. В браузере это доступно через панель разработчика (DevTools), обычно на вкладке «Console».
- 18 июля 2025
FormControl и FormGroup в Angular
Если вы разрабатываете веб-приложение, вам рано или поздно придётся собирать данные от пользователя. К счастью, реактивные формы в Angular позволяют делать это без лишней сложности — без нагромождения директив и с минимальным количеством шаблонного кода. Более того, их просто валидировать, так что можно обойтись даже без end-to-end тестов.
Говоря проще, form control’ы в Angular дают полный контроль разработчику — ничего не происходит автоматически, и каждое решение по вводу и управлению принимается явно и осознанно. В этом руководстве мы покажем, как объединять form control’ы в form group’ы, чтобы структурировать форму и упростить доступ к её элементам — как к логическим блокам. Чтобы лучше понять, как работают form group’ы в Angular, мы шаг за шагом соберём реактивную форму.
Для работы с примером скачайте стартовый проект с GitHub и откройте его в VS Code. Если ещё не обновляли Angular, поставьте актуальную на момент написания версию — Angular v18.
- 1 июня 2025
AOT против JIT-компилятора: что лучше для разработки на Angular?
Angular — один из самых популярных фреймворков для фронтенда — предлагает два подхода к компиляции: предварительная компиляция и динамическая компиляция во время выполнения. Оба метода играют важную роль в оптимизации приложений на Angular и повышении их производительности. В этом материале мы рассмотрим различия между ними, их преимущества и разберёмся, когда стоит использовать каждый из подходов.
- 25 мая 2025
Динамические формы в Angular 19: пошаговое руководство
Формы — неотъемлемая часть большинства веб-приложений: будь то регистрация, ввод данных или опросы. Модуль реактивных форм в Angular отлично подходит для создания статичных форм, но во многих случаях требуется, чтобы форма могла динамически адаптироваться в зависимости от действий пользователя или внешних данных.
В этой статье мы рассмотрим, как создавать динамические формы с использованием автономных компонентов в Angular 19, применяя модульный подход, который избавляет от необходимости использовать традиционные модули Angular. В сопроводительном репозитории на GitHub для оформления форм используется Tailwind CSS, однако в статье внимание сосредоточено исключительно на логике динамических форм. Tailwind и связанные с ним настройки намеренно не включены в примеры, чтобы сохранить акцент на основной теме.
- 25 мая 2025
Как обнаружить изменения в Angular: пошаговая инструкция
Как разработчики на Angular, мы нередко задумываемся, как фреймворк отслеживает изменения в данных и затем отображает их во вьюхе. Этот процесс называется стратегией обнаружения изменений в Angular. В этом материале мы разберёмся, как это работает, и научимся выбирать подходящую стратегию для разных сценариев.
- 24 мая 2025
Компоненты в Angular 18: пошаговое руководство
Angular развивается стремительно, и с выходом версии 18 появились новые возможности, которые разработчики могут использовать в своей работе. Одним из ключевых изменений в Angular 18 стало удаление традиционного файла app.module.ts — ему на смену пришли standalone-компоненты. Если вы только начинаете работать с Angular или переходите с более ранней версии, это пошаговое руководство поможет вам разобраться в базовых принципах компонентов в Angular 18. Независимо от вашего уровня — новичок вы или опытный разработчик — этот туториал покажет, как создавать, управлять и эффективно использовать компоненты в Angular.
- 19 мая 2025
Полное руководство по Angular @if
Одно из самых заметных нововведений в Angular — это встроенный синтаксис для управляющих конструкций, который появился в версии 17. Он решает одну из самых частых задач, с которой сталкивается каждый разработчик: показывать или скрывать элементы на странице в зависимости от условия. Раньше для этого использовали привычную структурную директиву *ngIf. Теперь у нас есть более современная альтернатива — синтаксис @if, часть нового подхода к управлению шаблоном.
В этом гайде мы сравним оба варианта, разберёмся, чем @if лучше, и покажем, как можно перейти на него автоматически. Также поговорим об одной распространённой ошибке — о том, как не стоит использовать @if вместе с пайпом async.
- 18 мая 2025
Модули Angular для организации кода и ленивой загрузки
Модули — один из ключевых инструментов Angular для построения масштабируемых и поддерживаемых приложений. В этой статье мы подробно рассмотрим:
- что такое модули в Angular;
- зачем они нужны;
- как их использовать для структурирования кода;
- как реализовать «ленивую» загрузку модулей;
- и чем отличаются Feature, Core и Shared модули.
Если вы только начинаете изучать Angular или хотите углубить свои знания, эта статья поможет вам лучше понять, как правильно организовать архитектуру Angular-приложения.
- 12 мая 2025
Навигация в Angular: RouterLink, Router.navigate и Router.navigateByUrl
Директива RouterLink позволяет настраивать переходы между маршрутами прямо в шаблоне Angular. А методы Router.navigate и Router.navigateByUrl, доступные в классе Router, дают возможность управлять навигацией программно — прямо из кода компонентов.
Разберёмся, как работают RouterLink, Router.navigate и Router.navigateByUrl.
- 11 мая 2025