- •Оглавление
- •Пример выполнения лабораторной работы
- •Создание основных типов данных и работа с ними
- •Создание массивов. Задание типов данных массивам.
- •Создание функций. Типы функций.
- •Создание собственного типа объекта
- •Специальные типы
- •Создание класса
- •Модификаторы доступа в TypeScript
- •Наследование классов
- •Интерфейсы
- •Декораторы
- •Задания
- •Настройка и установка необходимых компонентов
- •Создание авторизации и регистрации Создание модуля авторизации и регистрации
- •Роутинг, подключение шаблонов.
- •Разработка сервиса
- •Инициализация и валидации формы регистрации
- •Создание асинхронного валидатора
- •Создание компонента меню и шапки
Создание собственного типа объекта
При большом количестве объектов, в нашем случае студентов, с одинаковыми связками ключ-значение, функциями и массивами, для упрощения написания кода создаются собственные типы.
Создаём ещё трёх студентов, изменяем им только значения ключей name, age, height и названия объектов:
Пример:
let student1 = {
name: 'Mickhail',
age: 42,
height: 190,
level: [4,3,5,3],
groupName(): void{
console.log(this.name)
}
};
let student2 = {
name: 'Alex',
age: 62,
height: 170,
level: [2,3,5,5,4],
groupName(): void{
console.log(this.name)
}
};
let student3 = {
name: 'Maxim',
age: 37,
height: 140,
level: [4,3,5],
groupName(): void{
console.log(this.name)
}
};
Далее создаём собственный тип Students и прописываем его в каждом объекте:
//Собственный тип для студентов
type Students = {name: string, age: number, height: number, groupName: () => void, level: number[]};
let student1: Students = {
name: 'Mickhail',
age: 42,
height: 190,
level: [4,3,5,3],
groupName(): void{
console.log(this.name)
}
};
let student2: Students = {
name: 'Alex',
age: 62,
height: 170,
level: [2,3,5,5,4],
groupName(): void{
console.log(this.name)
}
};
let student3: Students = {
name: 'Maxim',
age: 37,
height: 140,
level: [4,3,5],
groupName(): void{
console.log(this.name)
}
};
При необходимости создания для отдельных объектов дополнительных полей, их тип можно записать в собственном типе (в нашем случае Students) как необязательный, поставив после его названия «?».
Например, создадим функцию getLevel в методе student2, которая будет возвращать массив level, и определим ее тип в методе Students как необязательный. Если getLevel будет задана как обязательная функция – компилятор выдаст ошибку у других двух объектов, т.к. функции там нет:
//Собственный тип для студентов
type Students = {name: string, age: number, height: number, groupName: () => void, level: number[], getLevel?: () => number[]};
let student1: Students = {
name: 'Mickhail',
age: 42,
height: 190,
level: [4,3,5,3],
groupName(): void{
console.log(this.name)
}
};
let student2: Students = {
name: 'Alex',
age: 62,
height: 170,
level: [2,3,5,5,4],
getLevel(): number[]{
return this.level;
},
groupName(): void{
console.log(this.name)
}
};
let student3: Students = {
name: 'Maxim',
age: 37,
height: 140,
level: [4,3,5],
groupName(): void{
console.log(this.name)
}
};
Специальные типы
Специальный тип Enum
Тип enum предназначен для описания набора числовых данных с помощью строковых констант. С помощью данного типа возможно создание констант и дальнейшее их использование как тип. Данные тип используется для оптимизации кода.
Создадим объект enum Group, содержащий в себе названия групп (типы) IST1, IST2, IST3, IST4.
Далее обращаемся к переменной Group и указываем её тип. Для этого пишем название константы, после двоеточия указываем тип Group, а затем определяем его тип, в нашем случае IST1:
enum Group {
IST1,
IST2,
IST3,
IST4
}
const group: Group = Group.IST1;
console.log(group);
Все поля enum (в нашем случае IST1, IST2, IST3, IST4) нумеруются, начиная с «0». Скомпилировав данный код в консоли будет значение «0», т.к. IST1 является первым элементом. Например, IST3 будет иметь номер 3.
Чтобы переопределить эти значения нужно в Group, у его типов, прописать новое значение:
enum Group {
IST1,
IST2 = 25,
IST3,
IST4
}
const group: Group = Group.IST1;
console.log(group);
const group2: Group = Group.IST2;
console.log(group2);
const group3: Group = Group.IST3;
console.log(group3);
const group4: Group = Group.IST4;
console.log(group4);
Скомпилировав данный код получаем для IST1 значение 0, IST2 – 25, IST3 – 26, IST4 – 27 (рис. 1)
Рисунок 1. – Результат работы типа Enum
Специальный тип Any
Any описывает данные, тип которых может быть неизвестен на момент написания приложения.
Например, создав переменную типа any и присвоив ей числовое значение, можно её переопределить на строковое значение.
Создаём переменную groups со значением 4 и типом any после переопределяем её и присваиваем значение 4 в строковом формате. Компилятор не выдаст ошибку:
let group: any = 4;
group = '4';
Специальный тип Never
Тип Never указывает на то, что функция ни при каких обстоятельствах не может ничего вернуть из себя, например, она всегда бросает ошибку или включает в себя бесконечный цикл, который не может ничего вернуть из функции.
Отличие never от void.
Функция, которая ничего не возвращает – это void, но она может вернуть undefined. Функция, которая никогда ничего не возвращает – это never.
Создадим функцию, которая возвращает ошибку:
function newError(err: string): never{
throw new Error(err);
}
Специальный тип Null и undefined
В TypeScript null и undefined являются субтипами. Субтипы – это типы, которые могут быть присвоены любому другому типу, например, string или number.
const isString: string = null;
const isNumber: number = undefined;
const isNull: null = null;
const isNull: null = undefined;
Можно назначить null и undefined самостоятельными типами. В этом случае можно присвоить null или undefined переменной с типом string, если явно не указать, что эта переменная может принимать оба этих типа, используя ранее рассмотренную конструкцию объединения – Union.
const isString: string = null;
// Error → Type 'null' is not assignable to type 'string'.
const isString: string = undefined;
// Error → Type 'undefined' is not assignable to type 'string'.
const isString: string | null = null;
const isString: string | undefined = undefined;
Общий тип generic
Обобщённый тип (обобщение, дженерик) позволяет резервировать место для типа, который будет заменён на конкретный, переданный пользователем, при вызове функции или метода, а также при работе с классами.
Создадим функцию, возвращающую дату, выведем в консоль число и строку:
function fun1(data: any){
return data;
}
console.log(fun1(30));
console.log(fun1('ngtu'));
Скомпилируем и получим верные значения. Но, если мы пропишем поле .lenght для строки – то получим 3, а прописав его для числа 30, получим undefined. При этом, в процессе компиляции нам не выведется ошибка, т.к. компилятор не знает, что именно вернёт наша функция fun1.
Для избежания данных ошибок используется тип generic.
Создадим функцию с применением данного типа:
function fun1<T>(data: T): T{
return data;
}
console.log(fun1(30));
console.log(fun1('ngtu') .length);
В данном случае, если мы пропишем length у числа 30, то получим ошибку уже на этапе компиляции.
Задания
Создайте объект «Машина» c 5 параметрами. Выведите данные на экран.
Дан массив с элементами 'Привет, ', 'мир' и '!'. Необходимо вывести на экран фразу 'Привет, мир!'.
Выведите в столбик два диапазона чисел, от 13 до 17 и от 98 до 102.
Контрольные вопросы
Что такое объект и зачем он применяется?
Какие бываю специальные типы данных?
Как создать собственный тип?
Что такое субтипы?
Литература
Руководство по TypeScript. [Электронный ресурс]. https://metanit.com/web/typescript/
Документация TypeScript [Электронный ресурс]. http://typescript-lang.ru/docs/
Лабораторная работа №4
Цель работы:
Классы, интерфейсы. Декораторы.
Сведения из теории