TypeScript — Интерфейсы

TypeScript — Интерфейсы

От автора: интерфейс — это синтаксический набор правил, которого элемент должен придерживаться. Другими словами, в TypeScript интерфейсы определяют синтаксис, который должен соблюдать элемент.

Они определяют свойства, методы и события, которые являются членами интерфейса. Интерфейсы содержат только объявления членов. Ответственность за определение членов лежит на производственном классе. Часто это помогает обеспечить стандартную структуру, которой будут придерживаться производственные классы. Давайте возьмем объект:

Если мы рассмотрим сигнатуру объекта, то получим:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Для того, чтобы повторно использовать сигнатуру через объекты, мы может задать её как интерфейс.

Объявление интерфейсов

Чтобы объявить интерфейс, мы используем ключевое слово interface. Ниже приведён синтаксис объявления интерфейса:

Синтаксис

Пример: Интерфейс и объекты

Этот код задаёт интерфейсы. Объект customer имеет тип IPerson. Отсюда следует, что объект обязательно должен будет определить все свойства, как указано в интерфейсе.

Другой объект со следующей сигнатурой, всё ещё рассматривается как объект типа IPerson, потому что этот объект анализируется исходя из его размера или сигнатуры. После компиляции мы получим следующий код JavaScript:

Результат вышеприведённого кода выглядит следующим образом:

Интерфейсы не конвертируются в JavaScript. Они просто являются частью TypeScript. Если вы посмотрите на скриншот инструмента TS Playground, то убедитесь, что отсутствует сгенерированный javascript, когда вы объявляете интерфейс — в отличие от класса. Таким образом интерфейсы имеют нулевое воздействие на JavaScript во время выполнения.

Тип Union и интерфейс

Следующий пример демонстрирует использование типа Union и интерфейса:

После компиляции мы получим следующий JavaScript код:

Результат выглядит следующим образом:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Интерфейсы и массивы

Интерфейс может определять и вид ключа, используемый массивом, и тип входа, который содержит массив. Индекс может иметь тип string или number.

Пример

Интерфейсы и наследование

Интерфейс может быть расширен с помощью других интерфейсов. Другими словами, интерфейс может наследовать от других интерфейсов. Typescript позволяет наследование от множества интерфейсов. Используйте ключевое слово extends, чтобы реализовать наследование для интерфейсов.

Синтаксис: Единичное наследование интерфейса

Синтаксис: Множественное наследование интерфейса

Пример: Простое наследование интерфейса

После компиляции мы получим следующий код JavaScript:

Результат выглядит следующим образом:

Пример: Множественное наследование интерфейса

Объект Iobj имеет тип interface leaf. interface leaf теперь на основе наследования имеет два атрибута — v1 и v2 соответственно. Отсюда следует, что объект Iobj теперь должен содержать эти атрибуты. После компиляции мы получим следующий код JavaScript:

Результат выглядит следующим образом:

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Курс по TypeScript

Прямо сейчас посмотрите курс по TypeScript!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree