Интерфейсы

Интерфейс определяет свойства и методы, которые объект должен реализовать. Другими словами, интерфейс - это определение кастомного типа данных, но без реализации. В данном случае интерфейсы в TS похожи на интерфейсы в языках Java и C#. Интерфейсы определяются с помощью ключевого слова interface.

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

Пример интерфейса и его определение для класса:

interface Student {

name: string;

age?: number;

Info(info: string): void;

}

class IStudent implements Student {

name: string;

job: string;

newAge: number;

Info(info: string): void {

console.log(info);

}

}

Создан интерфейс Student с необязательным полем age и функцией Info.

Задание – реализовать определение интерфейса для объекта.

Декораторы

Декораторы являются инструментом декларативного программирования, они позволяют добавить к классам и их членам метаданные и тем самым изменить их поведение без изменения их кода.

Декораторы представляют функции, которые могут применяться к классам, методам, методом доступа (геттерам и сеттерам), свойствам, параметрам.

function addShowAbility(constructorFn: Function) {

constructorFn.prototype.showHtml = function() {

const pre = document.createElement('pre');

pre.innerHTML = JSON.stringify(this);

document.body.appendChild(pre);

}

}

@addShowAbility // декоратор класса

class User {

constructor(public name: string, public age: number, public job: string) {}

}

let user = new User('ngtu', 21, 'Student');

console.log(user);

(<any>user).showHtml();

В коде выше

function addShowAbility(constructorFn: Function) {}

Это функция, которая в качестве параметра принимает конструктор класса User – она и называется декоратором.

Далее создан класс User, в конструктор которого передаются поля и ниже объект класса.

Далее с помощью декоратора был добавлен метод всем экземплярам класса user.

В нем мы обращаемся к классу user, далее создаём функцию, которая будет в html выводить все поля класса в теге <p> в формате JSON.

Затем запускаем метод showHtml:

(<any>user).showHtml();

После чего в браузере выведутся все поля класса.

Задания

1. Создайте структуру с именем student, содержащую поля: фамилия и инициалы, номер группы, успеваемость (массив из пяти элементов). Создать массив из десяти элементов такого типа, упорядочить записи по возрастанию среднего балла. Добавить возможность вывода фамилий и номеров групп студентов, имеющих оценки, равные только 4 или 5.

2. Создать класс Money для работы с денежными суммами в котором для рублей и копеек предусмотрены независимые целочисленные данные. Реализовать метод вывода суммы на экран. На основе класса Money создать класс Good для работы с товаром. Предусмотреть метод, осуществляющий уменьшение цены на заданное число процентов.

Контрольные вопросы

1. Что такое класс?

2. Какие есть способы создания классов?

3. Что такое модификаторы доступа и как они работают?

4. Что такое наследование классов?

5. Что такое декоратор?

Литература

5. Руководство по TypeScript. [Электронный ресурс]. https://metanit.com/web/typescript/

6. Документация TypeScript [Электронный ресурс]. http://typescript-lang.ru/docs/

Лабораторная работа №5

Цель работы:

Разработка архитектуры и шаблонов SPA.

Требования к выполнению

1. Приложение должно содержать минимум два различных layout.

2. В шаблоне приложения должна быть реализована возможность авторизации и регистрации.

3. Система должна содержать HTML формы (кроме форм регистрации и авторизации)

4. Предусмотреть шаблоне возможность добавления элементов на странице при вводе пользователем текста в поля формы.

Пример выполнения лабораторной работы

Разбор структуры проекта

Проект включает в себя файлы в корне, директории, папки, в них еще файлы и т.д.

Файлы в корне проекта:

• .angular-cli.json – этот файл отвечает непосредственно за настройку Angular CLI

• .editorconfig - необходим для однозначности кода. Устанавливает определённые параметры для элементов. Например общая кодировка, размер и тип таба и т.д.

• .gitignore – нужен для игнорирования определенных директорий в GIT.

• karma.conf.js – файл для настройки karma. Karma – инструмент для тестирования приложения

• package.json – записывает необходимые пакеты для запуска проекта,

• protractor.conf.js - файл для настройки protractor. Protractor - – инструмент для тестирования приложения

• tsconfig.json – служит для компиляции Typescript т.к сами браузеры его не компилируют

• файл конфигурации для Typescript. Содержит правила форматирования, которые будут использоваться для проекта

Директории:

• е2е – в ней находятся определённые файлы, отвечающие за тестирование

• node_modules – содержит все пакеты, необходимые для работы приложения

• src – содержит весь исходный код приложения

Директория проекта (src):

• index.html – через данную страницу будет выводится все приложение

• main.ts – запускает все приложение и устанавливает режим (режим разработки или работы)

• polyfilles.ts – подключение библиотек

• папка assets – необходима для хранения статических файлов

• app – хранится весь исходный код приложения

Папка app:

• app.component.css – файл стилей приложения

• app.component.html - шаблон приложения

• app.component.spec.ts – тесты для компонента

• app.component.ts – файл компонента

• app.module.ts – файл модуля

На данном этапе мы установили Angular и осуществили сборку простейшего приложения. Так же мы разобрали структуру базового проекта.

Для дальнейшей работы создадим новое приложение, с дополнительными характеристиками.