Создание основных типов данных и работа с ними
В TypeScript имеются следующие базовые типы:
Boolean: логическое значение true или false
Number: числовое значение
String: строки
Array: массивы
Tuple: кортежи
Enum: перечисления
Any: произвольный тип
Null и undefined: соответствуют значениям null и undefined в javascript
Void: отсутствие конкретного значения, используется в основном в качестве возвращаемого типа функций
Never: также представляет отсутствие значения и используется в качестве возвращаемого типа функций, которые генерируют или возвращают ошибку
В данной лабораторной работе будут использоваться типы Boolean, String, Number. Any.
Для хранения данных в программе в TypeScript, как и во многих языках программирования используются переменные.
Для определения переменных, как в JavaScript, можно использовать ключевое слово var:
var str2 = 'text';
Другой способ определения переменной применяет ключевое слово let, которое было добавлено в JavaScript в стандарте ES 2015:
let str2 = 'text';
Применение let является более предпочтительным, поскольку позволяет избежать ряд проблем, связанных с объявлением переменных. В частности, с помощью var мы можем определить два и более раз переменную с одним и тем же именем.
Создание основных типов:
// string let str = 'Text'; let str1: string = 'Text1'; // number let num: number = 10; // boolean let lTrue = true; let lFalse: boolean = false; lTrue = false; Для задания типа после названия переменной ставим двоеточие и пишем тип данных, однако данное действие необязательно, т.к. язык сам понимает к какому типу относится переменная. Если у переменной поменять значение на другое и другого типа, то компилятор выдаст ошибку (рис.4).
Рисунок 4. – Изменение типа данных
При необходимости преобразования значения переменной в другой тип данных, необходимо использовать тип Any, или логический оператор «ИЛИ» обозначающийся «|».
let labper: any = '1'; labper = 1; labper = true; let labper1: string | number = '1'; labper1 = 1; labper1 = '1';
Создание массивов. Задание типов данных массивам.
Пример создания массива:
let Array1 = [2, 4, 5];
Для задания массиву типа данных используется двоеточие после имени массива, затем прописывается тип данных и квадратные скобки. Во втором варианте после названия массива прописывается Array – определяет, что это именно массив и тип данных:
// обозначение типов массивов 1 вариант let Array1: number[] = [2, 4, 5]; let Array2: string[] = ['2', '4', '5']; let Array3: boolean[] = [true, false];
//обозначение типов массивов 2 вариант let Array4: Array<number> = [2, 4, 5]; let Array5: Array<string> = ['2', '4', '5']; let Array6: Array<boolean> = [true, false];
Пример создания массива с различными типами данных элементов. Для этого используется тип Tuples:
let Array7: [boolean, string, number] = [true, '3', 4];
При этом типы данных, определённые после названия массива, должны быть прописаны в том же порядке, что и данные.
Создание функций. Типы функций.
Каждая функция имеет тип, как и обычные переменные. Тип функции фактически представляет комбинацию типов параметров и типа возвращаемого значения.
Для примера создадим глобальную переменную lab1 типа number и функцию getParam, которая её возвращает. Тип функции прописывается после её названия:
const lab1: number = 23; function getParam(): number { return lab1; } console.log(getParam());
Для проверки данного кода необходимо скомпилировать файл index.ts в JavaScript код, т.к. браузеры читают только JS файлы (рис. 5).
Рисунок 5. – Команда для компиляции ts файла
После компиляции: открыть файл index.htm запустить его в браузере (Chrome) открыть консоль Chrome
В консоли должно появится значение переменной, в нашем случае «23» (рис. 6)
Рисунок 6. – Результат работы программы в Google Chrome
Создадим функцию, в которую будут передаваться и затем возвращаться определённые параметры. Будем передавать параметр lab1 – номер лабораторной работы и nameLab – название работы. Для этого прописываем параметры в круглых собках после названия функции и определяем каждому из них тип. При этом тип функции меняем на string, т.к. она вернёт строку. Важно понимать, что при передаче значений параметров, их необходимо прописывать в той же последовательности, в какой они ожидаются в функции.
function getParam(lab1: number, nameLab: string):string { return lab1 + nameLab; } console.log(getParam(1, '-Введение в TypeScript.'));
Проверяем результат в консоли (рис.7)
Рисунок
7. – Результат работы функции
Для функций, которые ничего не возвращают, используется тип void.
Пример:
function getParam(lab1: string): void { console.log(lab1) }
Для присваивания функции переменной, необходимо заранее типизировать эту переменную.
Допустим, необходимо присвоить функцию sum переменной summa. Для этого нужно определить тип функции, в круглых скобках, после названия переменной, записать параметры функции (при этом названия параметров не обязательно должны совпадать с названиями параметров в самой функции), поставить стрелку и записать тип возвращаемого значения функции.
let summa: (a: number, b: number) => number; function sum(n1: number, n2: number): number { return n1 + n2; } summa = sum; console.log('summa(15, 5)');
Стрелочные функции
Для определения функций в TypeScript можно использовать стрелочные функции. Стрелочные функции представляют выражения типа (параметры) => тело функции. Например:
let sum = (x: number, y: number) => x + y; let result = sum(25, 85); console.log(result);
Стрелочные функции можно передавать в функцию вместо параметра, который представляет собой функцию:
function mathOp(x: number, y: number, operation: (a: number, b: number) => number): number{ let result = operation(x, y); return result; } console.log(mathOp(10, 20, (x,y)=>x+y)); console.log(mathOp(10, 20, (x, y) => x * y));
Задания
Объявить переменные, с помощью которых можно будет посчитать общую сумму покупки нескольких товаров.
Создать массив для хранения данных о: названии машины и стоимости машины.
Написать функцию, которая вычисляет среднее арифметическое элементов массива, переданного ей в качестве аргумента.
Контрольные вопросы
Какие типы данных использует TypeScript,
В чем отличие при создании массива в JavaScript от создание массива в TypeScript,
Что такое тип функции?
Что такое стрелочные функции (синтаксис)?
Литература
Руководство по TypeScript. [Электронный ресурс]. https://metanit.com/web/typescript/
Документация TypeScript [Электронный ресурс]. http://typescript-lang.ru/docs/
Лабораторная работа №3
Цель работы:
Объекты. Специальные типы. Общий тип generic.
Сведения из теории
Объект в TypeScript является сущностью, которая содержит набор пар ключ-значение. Значение может быть переменной, массивом или даже функцией. Объект рассматривается как отдельный тип переменной, не относящийся к примитивным.
Пример создания объекта:
let student = {
name: 'Mickhail',
age: 42,
height: 190
};
В примере выше создан объект student с тремя разными парами ключ-значение.
Для использования функционала typescript нужно прописать типы значениям объекта. Для этого после названия объекта в фигурных скобках перечисляются ключи значений и их типы соответственно (порядок ключей не важен):
let student: {name: string, age: number, height: number} = {
name: 'Mickhail',
age: 42,
height: 190
};
Для передачи функции в объект необходимо так же указать её тип.
Создадим функцию groupName, которая ничего не возвращает и не принимает никаких параметров. Для определения её типа в объекте, пишем название функции, в круглых скобках принимаемые параметры (если их нет, то оставляем пустыми) и после стрелки тип функции:
let student: {name: string, age: number, height: number, groupName: () => void} = {
name: 'Mickhail',
age: 42,
height: 190,
groupName(): void{
console.log(this.name)
}
};
Кроме функций в объект можно передать массив. Для определения типа массива в объекте нужно написать его название и тип данных, после которого поставить квадратные скобки:
let student: {name: string, age: number, height: number, groupName: () => void, level: number[]} = {
name: 'Mickhail',
age: 42,
height: 190,
groupName(): void{
console.log(this.name)
},
level: [4,3,5]
};