TypeScript: Стандартные встроенные типы

Добро пожаловать на мой второй урок по TypeScript, в котором мы более подробно рассмотрим встроенные типы, входящие в состав TypeScript. Если вы новичок в TypeScript, вам следует прочитать мой блог о введении и настройке TypeScript здесь: https://dev.to/vkton115/easy-start-guide-typescript-3ip4.

Аналогично тому, как в javascript есть встроенные типы, такие как

  • числа
  • строки
  • булевы
  • null
  • неопределенный
  • объекты
  • функции

TypeScript вводит некоторые собственные встроенные типы, такие как:

  • любой
  • неизвестный
  • никогда
  • перечисление
  • кортеж

Вывод:

В прошлом уроке мы узнали, что переменные можно инициализировать как определенные типы, например, так:

let count: number = 123;
Войти в полноэкранный режим Выйти из полноэкранного режима

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

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

let count = 123;
Вход в полноэкранный режим Выйти из полноэкранного режима

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

ANY

Типизация any может быть реализована одним из двух способов. Объявление переменной без присвоения ей значения:

let age;
age = 10;
age = 'ten'; //this will work because age was not given a specified type when declared.
Войти в полноэкранный режим Выйти из полноэкранного режима

Другой способ установить тип any аналогичен установке любого другого типа, например:

let age: any = 10;
age = 'ten';
Войти в полноэкранный режим Выйти из полноэкранного режима

Однако использование типизации ‘any’ противоречит основной функциональности TypeScript. Это просто оставлено в качестве опции, чтобы дать пользователям возможность объявлять переменные свободного типа для определенных ситуаций, когда конкретная типизация может быть неважной или «разрушающей код».

МАССИВЫ

В JavaScript отдельные элементы массива могут быть разных типов:

let types = [123, 'strings', true];
Войти в полноэкранный режим Выход из полноэкранного режима

Чтобы указать тип значений отдельных элементов в TypeScript, формат будет выглядеть следующим образом:

let numbers: number[]= [1, 2, 3] // this will work because every value in the array is already a number

let age: number[] = [4, 10, '20'] // this won't work because '20' is a string
Ввести полноэкранный режим Выйти из полноэкранного режима

При использовании функции inference допустимыми типами элементов будут те типы, которые уже присутствуют в массиве при назначении

let numbersAndStrings = [1, 2, 3, '4'] // this infers that both numbers and strings can exist in this aray
numbersAndStrings.push('hello') // this will work
numbersAndStrings.push(false) // this will error because booleans were not inferred
Войти в полноэкранный режим Выйти из полноэкранного режима

Аналогично тому, как задать примитивному значению тип ‘any’, массивы TypeScript могут принимать любые значения, инициализируясь как пустой массив.

let anyType = [];
anyType.push(1) //this works
anyType.push('string') // this also works
anyType.push(false) // this works too
Войти в полноэкранный режим Выход из полноэкранного режима

ЗАВЕРШЕНИЕ КОДА

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

Получив массив TypeScript, например:

let numbers = [1, 2, 3]; //inference makes it so all elements are presumed to be numbers
Войти в полноэкранный режим Выйти из полноэкранного режима

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

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

КОРТЕЖИ

Кортежи — это, по сути, массивы TypeScript фиксированной длины, в которых вы можете указать тип данных, которыми должен быть индекс каждого элемента. Синтаксис кортежей TypeScript выглядит следующим образом:

let person: [string, number] = ['Vincent', 27];
Войти в полноэкранный режим Выйти из полноэкранного режима

Это делает для нас несколько вещей:

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

let person: [string, number] = ['Vincent', 27, 'male'] // error: target only allows for 2 elements

let person: [string, number] = ['Vincent'] // error: target requires 2 elements;
Вход в полноэкранный режим Выход из полноэкранного режима

Примечание: использование методов push/pop/shift/unshift, похоже, позволяет нам обойти это и добавлять/удалять значения в массиве. Причины этого мне неизвестны, но на данный момент это кажется упущением в функциональности TypeScripts.

2. Использование кортежей также позволяет нам устанавливать тип данных для определенных элементов массива.

let person: [string, number] = ['Vincent', 'twenty-seven'] //error index 1 cannot be a string
Вход в полноэкранный режим Выход из полноэкранного режима

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

ENUMS

Enums (сокращение от enumerated) — это тип данных, который включает в себя предопределенные значения. В TypeScript он инициализируется ключевым словом ‘enum’:

enum Alphabet {a, b, c}
Вход в полноэкранный режим Выйти из полноэкранного режима

По умолчанию значение первого элемента в скобке устанавливается равным 0, а каждое следующее за ним значение будет увеличиваться на 1, таким образом:
a = 0
b = 1
c = 2

Вы можете указать значение конкретного элемента (элементов), но учтите, что значения всех последующих элементов будут увеличиваться на единицу по умолчанию, если не указано иное.

enum Alphabet {a, b = 20, c}
console.log(Alphabet.a)// 0
console.log(Alphabet.b)// 20
console.log(Alphabet.c)// 21

let letter: Alphabet = Alphabet.b;
console.log(letter) //20 
Вход в полноэкранный режим Выход из полноэкранного режима

примечание: добавление const в начало объявления перечисления сгенерирует более оптимизированный и чистый код при запуске компилятора.

ФУНКЦИИ

Когда речь идет о функциях, аннотирование параметров важно для того, чтобы убедиться, что передаваемые аргументы имеют правильный тип:

function count(start: number, incrementer: number){
  return start + incrementer;
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Здесь мы объявляем функцию count. Ее параметры, start и incrementer, относятся к числовым типам, поэтому если вы попытаетесь передать в функцию count аргумент, не являющийся числом, вы получите ошибку.

Если вы хотите задать необязательные параметры в TypeScript, есть два способа.
1. Использование значений по умолчанию

function count(start: number, incrementer = 1){
  return start + incrementer;
}

count(2) //=> returns 3 (2 + 1)
Войти в полноэкранный режим Выйти из полноэкранного режима

2. Использование ‘?’

function count(start: number, incrementer?: number){
  return start + (incrementer || 1);
}
count(2) //=> returns 3 (2 + 1);
count (2, 2) //=> returns 4 (2 + 2);
Войти в полноэкранный режим Выход из полноэкранного режима

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

Также обратите внимание, что благодаря умозаключениям TypeScript знает, что возвращаемое значение всегда будет числовым типом. Однако в функции в других случаях вы можете захотеть указать, какой тип значения должен быть возвращен, как в этом примере:

function returnNumber():number{
  return 7;
}//this will work

function returnNumber():number{
  return '7';
}//this won't work
Войти в полноэкранный режим Выйти из полноэкранного режима

связанные конфигурации:
noUnusedParameters — при значении true, если параметр никогда не используется в функции, будет показана ошибка.
noImplicitReturns — при значении true будет выдана ошибка, если в функции есть путь кода, который явно не возвращается в функции.
noUnusedLocals — при значении true будет выдана ошибка, если есть какие-либо неиспользуемые переменные. Сюда входят переменные, объявленные внутри функций.

ОБЪЕКТЫ

Когда речь заходит об объектах JavaScript, мы привыкли к тому, что свойства можно добавлять с помощью нотации точка/строка, например, так:

let obj = {};
obj.name = 'Vincent';
obj.age = 27;

console.log(obj) => // {name: Vincent, age, 27}
Войти в полноэкранный режим Выйти из полноэкранного режима

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

let contactInfo: {
name: string,
phone: number,
fax?: number
} = {name: 'Vincent', phone: 123_456_7890}
Вход в полноэкранный режим Выход из полноэкранного режима

Примечание: числа в TypeScript могут быть разделены знаком подчеркивания (_) для сегментации.

Как вы можете видеть, мы изначально определили структуру и тип значения каждого ключа в теле объекта. Факсимиле установлено как необязательное с помощью символа ‘?’, поэтому нам не нужно включать его при присвоении начального значения объекта. Использование ‘?’ обычно не рекомендуется, поскольку это может привести к непредвиденным ошибкам при компиляции, однако в данном случае это имеет смысл, поскольку не у каждого человека может быть факсимильный аппарат.

И, наконец, поскольку мы определили типы значений каждого ключа, их можно переназначать, если они переназначаются тому же типу данных.

contactInfo.phone = 987_654_3210 // this is an ok reassignment
contactInfo.phone = "(123)-456-7890" //this won't work because it expects a number and not a string.
Вход в полноэкранный режим Выход из полноэкранного режима

ЗАКЛЮЧЕНИЕ

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

Оцените статью
devanswers.ru
Добавить комментарий