TYPESCRIPT ЧАТЬ 2 (ПЕРЕМЕННЫЕ, ДЕСТРУКТУРИРОВАННИЕ, ИНТЕРПОЛЯЦИЯ, ФУНКЦИИ, КОРТЕЖИ)
Запуск таска (Task)
Запустите watcher, который мы настроили в вводном видео. Нажмите shift+ctrl+p -> Run Build Task или нажмите Ctrl+Shift+B.
Отключить отображение JavaScript файлов
Перед тем как начать давайте отключим отображение js файлов. Конечно хорошо, что мы видим js одновременно с ts, можно посмотреть, что формируется после компиляции ts. Но давайте уберём отображение js файлов в обозревателе решения. Для это нажмите shift+ctrl+p и наберите “settings” выберите “Open User Settings”. И добавьте files.exlude, чтобы убрать JavaScript файл.
Запуск таска в Visual Studio Code
|
1
2
3
4
5
6
7
8
|
«files.exclude»: {
«**/.git»: true,
«**/.svn»: true,
«**/.hg»: true,
«**/CVS»: true,
«**/.DS_Store»: true,
«**/*.js»: true
}
|
Все основные фишки, о которых я буду говорить в этом видео в основном касаются ES7, но они уже давно доступны в TypeScript.
Базовые типы и переменные
Переменные в TYPESCRIPT определяться точно также, как и в JS, но их можно декорировать типами, указывая компилятору какой тип ожидается у переменной. Например, number, string или Boolean.
|
1
2
3
|
var num: number = 1;
var str: string = «string»;
var bool: boolean = true;
|
Если не указывать тип, но задать значение, то компилятор TYPESCRIPT автоматически определить тип, хотя это касается в основном примитивных типов. Можно также объявить переменную в традиционном стиле, и компилятор автоматически определит тип по литералу.
|
1
|
var str = «string»;
|
Переменные можно определять также через оператора let и const (данные фичи доступны в ES2015/ES6).
|
1
2
|
let str2 = «»;
const str3 = «»;
|
Фактически отличие let от const это то, что переменная с типом const не будет переприсвоена в процессе нашей программы т.е. значение константно, вечное единое значение. Тогда как с let можно это сделать т.е. переприсвоить. Немного дальше я расскажу про let поподробнее у данного оператора есть интересная особенность в отличие от var.
Также в TYPESCRIPT мы можем задать тип массивам. Для этого существует два способа, через квадратные скобки и обобщения. Про обобщения поговорим позже.
|
1
2
|
var arr: number[] = [1, 23, 4, 5, 6];
var arr1: Array<number> = [1, 2];
|
Если мы укажем тип «any», который так и переводится «любой».
|
1
|
var arr2 : any = [1, «Test», null];
|
Соответственно наш массив сможет принимать любой тип, но это плохой способ т.о. мы стреляем себе в ногу это просто небезопасно. Поэтому не рекомендуется делать это без особой необходимости.
Деструктурированные массивов (доступны в ES2015/ES6)
Деструктурированные массивов – еще один способ получить переменные в области видимости.
Указав несколько переменных в квадратных скобках после оператора let, var, const мы можем присвоить массив той же длины. В результате переменные внутри скобок будут доступны в области видимости.
|
1
2
3
|
var [test1, test2] = [«Hello world!», «Hello again!»];
console.log(test1, test2);
|
Пример ниже показывает полезность деструктурированного присваивания более очевидно. Чтобы поменять местами переменные a и b без деструктурированного присваивания нам придется создать дополнительные переменные _a и _b. Присвоить им значения первых переменных a и b, а потом поменять местами. Давайте запустим пример и посмотрим, что переменные a и b поменяли значения
|
1
2
3
4
|
var _a = a;
var _b = b;
a = _b;
b = _a;
|
С деструктурированнием это происходит более изящно
|
1
|
[a, b] = [b, a]
|
Интерполяция строк (доступна в ES2015/ES6)
Интерполяция строк — это удобный способ интегрировать переменные в строковые значения. Фактичекски мы оборачиваем выражение обратными кавычками (клавиша ё на русской раскладке или символ тильда), а внутри строки оборачиваем нужную переменную фигурными скобками со знаком доллара перед ними. Например, если мы хотим задать число после слова price в нашем примере, то нам придется использовать оператор конкатенации строк в данном случае символ плюс.
|
1
|
var str = «The price is» + num + «$»;
|
При интерполяции тот же процесс выглядит значительно изящнее и читабельнее.
|
1
2
|
var str2 = `The price is ${num}$`;
var str3 = `The price is ${num + num}$`;
|
Более очевидный пример преимущества интерполяции строк.
|
1
2
3
4
5
6
7
8
9
10
11
|
var tableName = «User»;
var criterium = «New»;
var term = 25;
var sql1 = «SELECT NAME, EMAIL FROM « + tableName
+ » WHERE Status = ‘» + criterium + «‘»
+ » AND Term = « + term + «;»;
var sql2 = `SELECT NAME, EMAIL FROM ${tableName}
WHERE Status = ‘${criterium}’
AND Term = ${term};`;
|
Повторю еще раз интерполяция работает только с обратными кавычками. Двойные и одинарные не работают.
Оператор Let (доступен в ES2015/ES6)
‘let’ — задается переменным, которые можно переприсвоить другие значения с точки зрения семантики в отличие от константы. Но самое главное, это также признак того, что переменная используется только в том блоке, в котором она определена, а не во всей функции. Обратите внимание на пример с var
|
1
2
3
4
5
6
7
|
var t = 5;
if (true)
{
var t = 1;
console.log(t);
}
console.log(t);
|
На первый взгляд очевидно, что мы должны бы получить результат вида
1 и 5.
Давай запустим пример и посмотрим. Результат 1 и 1. Результат довольно странный это может быть полезно в некоторых случаях, но уж очень неочевидно. Оператор let сделает, то чего мы и ожидали.
|
1
2
3
4
5
6
7
|
let t = 5;
if (true)
{
let t = 1;
console.log(t);
}
console.log(t);
|
Запустите программу.
Поэтому безопаснее в TYPESCRIPT объявлять переменные через let.
В итоге
“Const” — это самый строгий признак переменной, которую нельзя переприсваивать и переопределять.
“Let” — можно переприсвоить и она имеет ограниченную область видимости, что безопасно.
“Var” – Слабый признак переменой. В целом var — это самая слабая и сильная сторона JavaScript.
Функции
Функция typeNumber декорируется указателем на тип number. Но можно убрать указатель на тип так как компилятор TypeScript умеет автоматически определять тип.
В функции typeAny тип не определен иногда удобно ставить такой тип, чтобы компилятор не подчеркивал ошибки и не раздражал, но опять-таки желательно подставлять тип.
В функции optionalParams параметр “v” имеет значение по умолчанию «hello»
Поэтому если мы запустим функцию optionalParams, то функция по умолчанию вернет “Hello!”, но если подставить другое значение, то значение по умолчанию про игнорируется.
В функции nullableParam параметр “v” декорируется вопросом. Данная сигнатура говорит о том что параметр может быть неопределённым “undefined”.
В теле функции происходит проверка на определенное значение в переменной. Кто знает javascipt понимает, что неопределенная переменная вернет false. Поэтому отработает блок else и функция вернет нам 100.
|
1
2
3
4
5
6
|
function nullableParam(v?: number) {
if (v)
return v;
else
return 100;
}
|
Запустим файл и посмотри результат. Тело функции можно сократить эквивалентным выражением через тернарный оператор.
|
1
2
3
|
function nullableParam(v?: number) {
return v ? v : 100;
}
|
или через оператор null-объединения. В некоторых языках это два вопроса в TYPESCRIPT – это две вертикальные линии. Т.е. если значение слева неопределенно (Undefined), то вернется значение справа.
|
1
2
3
|
function nullableParam(v?: number) {
return v || 100
}
|
Можете запустить пример ничего не изменится.
Кортежи
Лично я люблю картежи за их возможность вернуть несколько разный типов значений.
В TYPESCRIPT мы можем задать тип переменной, функции и методу по схеме картежей.
В официальной документации используется синтаксис через квадратные скобки, куда мы указываем типы. В моем примере переменная “tuple” далее получает массив с данными.
|
1
|
var tuple: [string, number] = [«Milk», 100];
|
Далее в консоли мы можем получить данные того типа которые указали. Где данные по индексу 0 это срока и по индексу 1 число. Можно использовать и комплексные типы.
|
1
|
console.log(tuple[0], tuple[1]);
|
Далее я добавил функцию «TupleFun», которая возвращает тот же тип. Т.o. нем не надо заранее определять комплексный тип, например, в виде интерфейса о которых мы еще поговорим, а динамически указать те типы, которые вернет наша функция.
|
1
2
3
|
function TupleFun(): [string, number] {
return [«Milk», 100];
}
|
Однако я считаю, что самый удобный способ объявления картежей это через динамические типы. В документации это не считается картежами, но по факту это тоже кортежи.
|
1
2
3
4
5
6
|
function TupleFunLike(): { name: string, price: number } {
return {
name: «Milk»,
price: 100
}
}
|
В данном примере мы можем получить именованное свойств
|
1
|
console.log(TupleFunLike().name);
|
Через именованное свойство получать тип объекта или значения удобнее чем через индексы.
Previous Post