В наши дни в мире веб-разработки самая популярная тема - TypeScript. Держу пари, вы слышали об этом, пусть даже мимоходом. Но если вы этого не сделали или вам просто любопытно, то вы попали в нужное место, мой друг!
В настоящее время я изучаю TypeScript вместе с Angular (статья об этом находится в разработке, так что следите за обновлениями!), Потому что это то, во что встроено наше веб-приложение на работе. Я решил написать простое и понятное руководство, чтобы вы могли приступить к работе с типами данных TypeScript.
Для простоты я разделю эту статью на две части - первая будет кратким обзором того, что такое TypeScript, типами данных и некоторыми вспомогательными примерами. Вторая статья будет посвящена установке и запуску TypeScript локально на вашем компьютере.
Что это?
Прежде чем мы начнем, вот краткое описание TypeScript моими собственными словами. Это надмножество JavaScript, что по сути означает, что это форма JavaScript, которая дает вам определенные преимущества наряду со всем великолепием, заложенным в «ванильном» JavaScript. Это язык с открытым исходным кодом, написанный и поддерживаемый Microsoft.
TypeScript преобразуется в JavaScript и будет работать в любой среде, в которой работает собственный JavaScript. Вы можете использовать TypeScript как для интерфейсных, так и для серверных приложений.
Он написан так же, как JavaScript, за некоторыми исключениями, которые мы скоро рассмотрим. Вот пример какого-нибудь TypeScript:
Постарайтесь не сосредотачиваться на всех двоеточиях и дополнительных вещах, которые вы видите выше, мы рассмотрим это ниже. Вместо этого сосредоточьтесь на вещах, которые выделяются - мы просто объявляем переменные со значениями, это строки, массивы и объекты, как в JavaScript.
Еще одна замечательная вещь, которую я узнал о TypeScript, - это то, что вы можете смешивать JavaScript с кодом без каких-либо проблем. Посмотрите скриншот ниже (это внутри приложения Angular):
Типы данных
Давайте начнем с самого интересного - с типов данных! (Есть несколько типов данных, которые мы не будем рассматривать - never, null, undefined. Это просто потому, что их мало. Я хочу, чтобы вы знали, что они существуют, и если вы хотите больше узнать о них types, вот ссылка на официальную Документацию по TypeScript для справки.)
TypeScript будет определять тип данных, назначенных переменной, без явной установки типа, но для простоты и хорошей меры я предпочитаю объявлять тип данных при объявлении моих переменных.
Мы назначаем типы данных, просто помещая двоеточие после имени переменной, но перед знаком равенства:
const {имя переменной}: {тип переменной} = {значение переменной}
Это соглашение, согласно которому объявляется большинство типов данных TypeScript, за исключением функций и объектов.
Некоторые типы данных имеют немного большую сложность, но вы поняли общую идею. Ниже приведены краткие объяснения типов данных и примеры их объявления.
Логический
Логические значения в TypeScript работают так же, как и в JavaScript. Переменные типа данных boolean объявляются так:
const myBool: boolean = false;
Нить
Строки в TypeScript работают так же, как и в JavaScript. Переменные строки типа данных объявляются так:
let myString: string = 'bacon'
Число
Числа в TypeScript работают так же, как и в JavaScript. Переменные типа данных number объявляются так:
const myNum: number = 1207;
Множество
Массивы в TypeScript, как и другие типы данных, такие же, как массивы в JavaScript. Переменные массива типов данных объявляются двумя разными способами:
const myArr: number[] = [12, 90, 71];
Вышеописанный способ - это то, как вы объявляете массив, если все элементы внутри этого массива являются числами.
const myArr: Array<number> = [12, 90, 71];
Этот способ объявления массива использует универсальный тип массива, равный number. С функциональной точки зрения нет никакой разницы в том, как эти способы приводят к конечному результату объявления переменной с типом массива.
Если типы данных внутри массива неизвестны или представляют собой смесь типов данных, массив можно объявить с использованием типа ‹any› (это отдельный тип, который обсуждается ниже):
const myArr: Array<any> = [12, 'thirteen', false];
Этот способ позволит вам смешивать типы данных в массиве.
Кортежи
Кортежи - это тип данных, уникальный для TypeScript. Думайте о них как о массивах с фиксированным числом элементов. Этот тип данных лучше всего использовать, когда вы точно знаете, сколько переменных у вас должно быть. Можно переназначить значение индексов, но не количество элементов в кортеже.
Переменные типа данных кортеж объявляются как массив:
let mine: [number, string];
Если мы хотим изменить значения элементов, мы можем это сделать, если они соответствуют типам, которые мы указали при объявлении нашей переменной:
mine[0] = 14 ✔️
mine[0] = 'Steve' ❌
Поскольку мы определили mine как кортеж, порядок значений также имеет значение и не может быть изменен. Кроме того, присвоение индекса за пределами исходного определенного числа приведет к ошибке:
mine[0] = ['Dave', 71] ❌
mine = [121, 'Dave', 'Steve']; ❌
mine = [121, 'bacon']; ✔️
Функция
Функции могут быть настолько явными, насколько вы хотите. Я имею в виду, что мы можем применять типы к параметрам и возвращаемым значениям. Ниже приведены два примера:
Эта функция выдает ошибку, если возвращается какое-либо значение, не являющееся числом или указывающее на число. Он может возвращать переменную , только если эта переменная указывает на число.
Выше мы проверяем тип параметров, передаваемых в нашу функцию. Это отличный способ избежать ошибок, потому что, если количество параметров отключено или если их тип данных не соответствует ожидаемому, TypeScript сообщит нам об ошибке.
Если мне нужна функция, которая не должна возвращать значение, я могу установить тип как void (тип данных, который означает отсутствие каких-либо данных. Хотя его можно использовать при объявлении переменных, обычно это не так. t, потому что тогда нам пришлось бы установить для переменной значение null или undefined, я использовал только тогда, когда функции не должны иметь возвращаемого значения) и если функция что-либо возвращает TypeScript выдаст ошибку:
Устанавливая тип на void, я четко указываю на свои возвраты и устанавливаю, что, хотя эта функция все еще может выполняться, она не должна возвращать значение. Если он вернет значение, я получу сообщение об ошибке.
Enum
Перечисления - долгожданное (по моему скромному мнению) дополнение к типам данных. Думайте о них как о более удобном для пользователя подходе к присвоению имен числовым значениям. Вот пример перечисления:
enum Foods {'bacon', 'tomato', 'lettuce'};
console.log(Foods[0]) // yields 'bacon' console.log(Foods.bacon) // yields 0 console.log(Foods['lettuce']) // yields 2
Также возможно назначить формат индекса нумерации с помощью перечислений. Во многих языках, включая C #, есть перечисления, и я рад, что они появились в JavaScript.
Вы можете проявить творческий подход к именам. Вы даже можете изменить числовое представление индексов. Если вы хотите, чтобы ваш первый индекс начинался с 18, а не с 0, это просто:
enum Foods {'bacon'= 18, 'tomato', 'lettuce'};
console.log(Foods['bacon']); // 18
Допустим, у нас есть значение 18, но мы не уверены, что оно отображается в нашем Foods перечислении, мы также можем это проверить:
console.log(Foods[18]); // 'bacon'
Примечательно, что теперь мы установили первый индекс, начинающийся с 18, следующий индекс будет с 19, и так далее, следуя установленному вами соглашению о нумерации.
Объект
Объекты в TypeScript определяются аналогично объектам в JavaScript. Мы можем быть настолько явными или неявными с нашим определением, насколько нам нравится или как того требует ситуация:
let data: = {name: 'Jonathan', age: 30, hobbies: ['running','swimming','coding']}; ✔️
let data: {name: string, age: number, hobbies: string[]} = {name: 'Jonathan', age: 30, hobbies: ['running','swimming','coding']}; ✔️
При создании объектов имена свойств неизменяемы, но порядок, в котором они появляются, не имеет значения, даже если мы определяем их в определенном порядке.
Кроме того, у нас могут быть простые объекты, подобные приведенным выше, или мы можем определить сложные объекты, которые используют преимущества нескольких типов данных, подобных приведенному ниже (этот объект предназначен только для демонстрационных целей):
Тип Псевдоним / Интерфейс
В приведенном выше примере сложного объекта вы можете подумать, что это круто, но что произойдет в следующий раз, когда мне понадобится создать сложный объект? Мне нужно снова ввести все это вручную?
Не бойтесь, псевдоним типа и типы интерфейса здесь, чтобы помочь! Псевдоним типа - это тип данных, который позволяет нам сохранять внутри него другие типы данных, а затем ссылаться на переменную вместо того, чтобы переписывать код снова и снова.
Кстати, псевдонимы типов и интерфейсы работают очень похоже. Оба позволяют нам создать объект / план того, как должны быть структурированы наши данные. Однако есть тонкие различия, о которых мы не будем здесь рассказывать. Вместо этого, вот пост, который объясняет эти различия чрезвычайно эффективным способом, если вы хотите копнуть глубже.
Между ними есть детали, о которых мы должны знать - при использовании псевдонима типа мы используем знак равенства (=) для объявления значений, интерфейс не требует знака равенства.
Теперь, когда у нас объявлен псевдоним, пора его использовать. Когда мы хотим «построить» нашу новую переменную из этого псевдонима, мы просто устанавливаем ее как тип данных:
Важно отметить, что интерфейс специфичен для TypeScript. Он используется только во время компиляции для проверки типов и выявления любых ошибок, которые могли ускользнуть от нашего внимательного взгляда. Данные из нашего интерфейса попадают в наш окончательный код, но сам интерфейс компилируется.
Классы
Отчасти классы - это настоящий «хлеб с маслом» TypeScript (по крайней мере, по моему скромному мнению). Придерживаясь идеи создания новых объектов, классы позволяют нам создавать данные гораздо проще, чем просто вводить их вручную каждый раз, когда возникает необходимость.
Классы можно рассматривать как схемы того, как следует определять наши данные и какие действия, если таковые имеются, они должны выполнять с помощью методов.
Ниже приведен пример класса в TypeScript (что стало возможным благодаря введению классов в ES6):
Теперь вы можете спросить себя, в чем разница между классом, псевдонимом типа и интерфейсом? Отличный вопрос! Основное различие между ними заключается в том, что классы могут быть созданы (мы можем создавать их новые экземпляры), а интерфейс - нет.
Конечно, есть и другие отличия, но они не рассматриваются в данной статье. Если вы хотите копнуть глубже, вот отличная статья, которую я прочитал, чтобы помочь мне понять эти различия. Вы найдете варианты использования для всех из них, как и я, при использовании TypeScript.
Союз
Это, безусловно, мой любимый тип данных TypeScript! Тип объединения позволяет нам объявить переменную и затем установить для нее значение «или или». Под этим я подразумеваю, допустим, мы ожидаем, что данные будут переданы в функцию, но мы не уверены, является ли это строкой или числом - это идеальная (и предполагаемая) цель типа объединения.
При определении типа мы используем одинарную вертикальную черту (в Windows это Shift + клавиша прямо над Enter). Вот как это будет выглядеть при определении переменной с типом данных union:
const numOfDoors: string | string[ ];
Это сообщает TypeScript, что numOfDoors - это переменная, которая может содержать либо строку, либо массив строк.
Вот пример той функции, о которой я упоминал ранее, с использованием типа объединения:
Любые
Любой - это тип, который мы устанавливаем, когда не уверены в том, какие типы данных мы будем получать. Возможно, мы получаем что-то от третьего лица или какие-то динамические данные, и мы не на 100% уверены, получаем ли мы строку, число или, возможно, массив информации. Это идеальный вариант использования типа any.
Я буду предостерегать от использования типа any, кроме случаев крайней необходимости, потому что при его использовании мы отказываемся от одной из основных функций TypeScript - проверки типов.
Однако у этого типа данных есть варианты использования, как и у всех упомянутых типов данных.
Вот и все!
Я же сказал, что это не займет много времени: D
Надеюсь, вам понравилась эта статья о TypeScript, и вы остались довольны тем, как она может оказаться полезной для вашей кодовой базы. В следующей статье мы рассмотрим практическую сторону TypeScript. Мы рассмотрим его установку, компиляцию и использование в вашем проекте (не только в проектах Angular)!
Эта статья изначально была размещена в моем блоге.
Пока вы там, не забудьте подписаться на мою информационную рассылку - вы можете сделать это в правом верхнем углу страницы, нажав на ссылку выше. Я обещаю, что никогда не буду спамить ваш почтовый ящик, и ваша информация не будет передана никому / сайту. Мне нравится время от времени присылать интересные ресурсы, которые я нахожу, статьи о веб-разработке и список моих последних сообщений.
Если вы еще этого не сделали, вы также можете связаться со мной в социальных сетях! Все мои ссылки также находятся в правом верхнем углу этой страницы. Я люблю общаться с другими и знакомиться с новыми людьми, поэтому не бойтесь здороваться :)
Удачного дня, друг и удачного программирования!
