Я хотел бы, во-первых, поприветствовать вас в моем втором рассказе о TypeScript. В этой публикации мы рассмотрим, как объявлять переменные, массивы и объекты. Также мы проверим, в чем разница между статической типизацией в TS и динамической типизацией в JS.

Я должен упомянуть, что в качестве редактора для написания кода я использую VS Code. Он имеет встроенную поддержку синтаксиса TS, а также вы можете устанавливать расширения любого типа. Потратив некоторое время на настройку, вы можете получить хороший бесплатный инструмент.

Основы ввода

Основное различие между TypeScript и JavaScript — это система типов. Давайте определим переменную, как показано ниже.

let firstName = 'Peter';

В TS переменная firstName всегда будет строкой, и ее тип нельзя изменить позже в коде. То же самое касается любых других типов данных, таких как числа, логические значения, объекты, массивы и т. д. Например, если вместо этого с помощью ‘Peter’ мы инициализируем переменную firstName числовым значением, мы можем затем подписать для нее только числовое значение в последнем коде. .

Как видите, способ объявления переменной такой же, как и в JavaScript. Мы делаем это с помощью ключевых слов let, const или var.

Теперь мы можем попробовать с числом и логическим значением. Я объявил переменную с именем age и присвоил ей значение 30, а переменную isOn со значением true.

let age = 30;
let isOn = true;

Мы видим, что, как я уже упоминал выше, способ объявления переменных выглядит так же, как и в JS.

Стоит отметить, что в TS и JS мы не используем целые числа для целых чисел и числа с плавающей запятой для десятичных дробей. Это не два отдельных типа, как в других языках программирования. У нас есть тип number, который охватывает и то, и другое.

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

Мы можем изменять значения переменных, но не типы. Обратите внимание, что нам не нужно говорить, какого типа должна быть наша переменная. TypeScript использует нечто, называемое выведением типов. Он используется, когда нет явной аннотации типа. Если вы хотите узнать об этом больше, вы можете ознакомиться с документацией. Мы также можем явно определить тип переменной.

Функции

Перейдем к теме функций. Мы можем объявить, какой тип переменной мы ожидаем в качестве аргумента. В TS, как и в JS, вы можете использовать стрелочный или обычный синтаксис. Давайте создадим функцию для вычисления площади круга.

const circleArea = radius => {
  return radius * radius * Math.PI;
}

Math – это встроенный в JavaScript объект со свойствами и методами для математических констант и функций. Это не объект-функция, не конструктор. Вы можете вызывать Math как объект, не создавая его, потому что свойства и методы Math являются статическими. TS только расширяет JavaScript, поэтому у вас есть доступ ко всем встроенным методам и объектам JS.

Вернемся к вышеупомянутой функции. Прямо сейчас ему можно передать любое значение, даже строковое или логическое. Мы можем попробовать вызвать CircleArea со строкой в ​​качестве аргумента и запустить ее. Давайте запишем в console.log результат этой функции ниже.

console.log(circleArea('nothing')); // result is NaN(Not a Number)

Как видите, результат не выдает пользователю никаких ошибок. Он компилируется и запускается, даже если на выходе NaN. Это именно тот тип проблемы, который решает система типов.
Так как же определить тип аргумента, который мы ожидаем передать в функцию? Так же, как на изображении ниже.

Инструкция radius: number означает, что мы можем передавать только числовое значение, иначе мы получим ошибку, как на картинке. Как видите, TypeScript может сэкономить нам время на поиск глупых ошибок, как в примере выше.

Массивы и объекты в TS

Массивы

Мы объявляем массивы так же, как в JS. Проверьте изображение ниже.

Обратите внимание, что мы определили массив строк, поэтому мы можем передать в него только строковое значение. Когда мы пытаемся нажать 39 или true редактор подчёркивает их и возвращает ошибки. Кроме того, мы не можем переопределить значение в массиве значением другого типа.

Когда мы объявляем новый массив, тип, который мы присвоили этому массиву, не может быть изменен позже. Если вы хотите установить тип массива, но у вас нет данных для его инициализации, вы можете сделать это, как показано здесь:

let friends: string[] = [];

Теперь у вас есть пустой массив, который ожидает строковые значения.

Конечно, мы можем определить массивы смешанных типов. Но стоит помнить, что если мы объявим массив с некоторыми типами, но некоторые из них будут опущены, то те, которые были опущены, не могут быть добавлены в массив. То же правило, что и с переменными. То, что вы инициализируете, это то, что вы можете получить. Я пытаюсь представить это на примере.

Как видите, мы можем добавлять числа и строки в наш массив, потому что он был инициализирован этими типами. К сожалению, мы не можем добавить логический или любой другой тип, который мы пропустили при инициализации.

Типизация работает не только для элементов массива, но и для самого массива. Например, если я хочу изменить значение переменной, которой уже присвоен некоторый массив, я не могу этого сделать. Посмотрите на пример ниже.

Однако я все еще могу изменить его на другой массив с внутренними значениями того же типа. Во всяком случае, это двойная защита. Мы знаем, какие типы значений мы можем ожидать, а также мы можем быть уверены, что когда-то массив, он навсегда останется массивом.

Объекты

В объектах каждое свойство ведет себя так же, как и переменные. Если мы объявим его с некоторым значением, например, «строка», мы сможем изменить его только на другую строку.

Также, как и в случае с массивами, мы не можем изменить значение переменной с назначенным ей объектом ни на что другое, кроме как на другой объект.

Еще одна вещь заключается в том, что после того, как мы определили объект, мы не можем добавить к нему никаких дополнительных свойств. Например, если я попытаюсь в приведенном выше коде добавить свойство contagiousness, я получу ошибку. Пожалуйста, посмотрите на изображение ниже.

Предположим, я хочу переопределить весь объект. Как я упоминал ранее, я не могу сделать это с другим типом значения, поэтому это должен быть объект. Кроме того, структура объекта должна быть такой же, как и инициализированная. Таким образом, я могу изменить значения свойств, но я не могу изменить имена свойств или даже опустить некоторые из них или добавить новые.

TypeScript довольно строг с разными типами, но это хорошо, потому что это означает меньше ошибок и более чистый код.

Спасибо тем, кто дошел до конца. Я надеюсь, что вы узнали что-то новое, потому что это цель этой публикации. В следующей истории мы более подробно рассмотрим объединение типов, перечислений, кортежей и псевдонимов. Хорошего дня и берегите себя.