Полное руководство по осмыслению типов в TypeScript

Typescript — это строго типизированный язык, построенный на основе Javascript. Таким образом, типы должны быть определены в Typescript, когда мы пишем наш код, а не выведены, как это обычно делается в Javascript.

В этом руководстве мы углубимся в то, как типы работают в Typescript, и как вы можете максимально использовать их. Если вы новичок в Typescript, [начните с нашего руководства по созданию вашего первого проекта Typescript] (https://fjolt.com/article/typescript-how-to-use).

Основные типы в Typescript

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

• undefined - когда что-то не определено в коде или не существует.

• any — относится к любому типу — по существу, тип вообще не применяется.

• enum — перечисление — [подробнее о перечислениях см. здесь] (https://fjolt.com/article/typescript-enums).

• число - число от -2^53 - 1 до 2^53 - 1, т.е. 1.

• string - комбинация символов, т.е. test.

• boolean - истина или ложь.

• bigint - число больше 253 - 1.

• символ — полностью уникальный идентификатор.

• функция - говорит само за себя - функция.

• object - объект или массив

• never — используется в функциях — когда функция никогда не возвращает значение, а только выдает ошибку.

• void — используется в функциях — когда функция никогда не возвращает значение.

Пользовательские типы в Typescript

Typescript также позволяет нам определять наши собственные типы. Вы можете узнать об этом здесь.

Основы типов в Typescript

Теперь, когда мы описали все основные типы, которые использует Typescript, давайте посмотрим, как они работают. Во-первых, давайте начнем с основ синтаксиса.

Использование типов Typescript в переменных

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

```машинопись

пусть х:число = 5;

Точно так же строковый тип может выглядеть так:

```машинопись

пусть x:string = "Некоторая строка";

Если вы неправильно определите тип переменной, Typescript выдаст ошибку. Например, пусть x:string = 5 вызовет следующую ошибку:

Тип «число» не может быть присвоен типу «строка».

Определение типов объектов в Typescript

Объекты повсюду в Javascript, и Typescript ничем не отличается. Объект в Typescript имеет тип object, но значения внутри объекта также имеют свои собственные типы. В самом простом примере мы можем определить переменную как объект типа, который ссылается на объект любой длины или набора значений:

```машинопись

пусть myObject:object = {a: 1};

Если мы хотим немного усложнить, мы также можем определить ожидаемые типы свойств внутри объекта. Предположим, у нас есть объект, в котором у нас есть 3 свойства:

• имя, типа строка

• возраст, типа число

• интересы типа объект, где интересы не являются обязательными

Мы можем определить каждый из них явно, используя следующий формат:

```машинопись

let userOne:{ имя: строка, возраст: число, интересы?: объект } = { имя: "Джон Доу", возраст: 24, интересы: ['лыжи', 'походы', 'серфинг'] };

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

```машинопись

введите Пользователь = {

имя: строка,

возраст: число,

интересы?: объект

let userOne:User = {имя: "Джон Доу", возраст: 24 года, интересы: ['лыжи', 'походы', 'серфинг'] };

Теперь у нас есть хороший чистый тип User, который мы можем применить к любой переменной или функции. Далее рассмотрим массивы.

Определение типов массивов в Typescript

Поскольку массивы и объекты могут содержать внутри свои собственные типы, то, как мы их определяем, немного отличается. Для массивов самый простой способ определить тип — использовать синтаксис type[]. Например, массив строк выглядит так:

```машинопись

let arrayOfStrings:string[] = ['some', 'strings'];

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

```машинопись

пусть myArray:[ строка, число ] = [ "некоторые", 15 ]

В Typescript, когда мы определяем такой массив с фиксированными типами и фиксированной длиной, он называется кортежем.

Смешанные типы массивов в Typescript

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

```машинопись

пусть myArray:(строка|число)[] = [ "некоторые", 15 ]

Опять же, для более сложных типов мы можем захотеть определить свои собственные типы. Вы можете узнать больше о пользовательских типах здесь.

Использование типов Typescript в функциях

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

```машинопись

function generateName(firstName: строка, lastName: строка) {

console.log(Привет, ${firstName} ${lastName})

// Запускаем функцию

generateName("Джон", "Доу");

Эта функция будет работать успешно, так как мы указали правильные типы при запуске функции (т. е. оба аргумента являются строками).

Одно фундаментальное различие между Typescript и Javascript заключается в том, что если бы мы запустили generateName("John");, Typescript выдал бы нам следующую ошибку:

Ожидал 2 аргумента, а получил 1.

Поскольку Typescript гораздо более строгий, чем Javascript, он ожидал два аргумента, а не один. Если мы хотим, чтобы это работало, мы должны явно указать Typescript, что второй аргумент является необязательным. Мы можем сделать это, добавив ? после второго аргумента. Таким образом, следующий код работает нормально, без ошибок:

```машинопись

function generateName(firstName: строка, lastName?: строка) {

console.log(Привет, ${firstName} ${lastName})

// Запускаем функцию

ГенерироватьИмя("Джон");

Использование Typescript в функциях с возвращаемыми типами

Добавить возвращаемый тип в Typescript очень просто. Если функция возвращает что-то с помощью ключевого слова return, мы можем указать, какого типа должны быть данные из return. Поскольку мы ничего не возвращаем, наш тип возвращаемого значения известен как void.

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

```машинопись

// Обратите внимание, что мы добавили : void!

function generateName (firstName: строка, lastName: строка): void {

console.log(Привет, ${firstName} ${lastName})

// Запускаем функцию

generateName("Джон", "Доу");

Теперь Typescript знает, что эта функция ничего не вернет. Если он начнет что-то возвращать, typescript выдаст ошибку:

Тип «строка» не может быть присвоен типу «пусто».

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

```машинопись

функция generateName (имя: строка, фамилия: строка): строка {

return Привет ${firstName} ${lastName};

// Запускаем функцию

let firstUser = generateName("Джон", "Доу");

Запись функций как переменных в Typescript

Javascript имеет общую нотацию, в которой функции записываются как переменные. В Typescript мы можем сделать то же самое, нам просто нужно заранее определить типы. Если бы мы хотели преобразовать нашу функцию выше в формат переменной, это выглядело бы так:

```машинопись

let generateName:(firstName: строка, lastName: строка) => string = function(firstName, lastName) {

return Привет ${firstName} ${lastName};

Обратите внимание на одно небольшое отличие: тип возвращаемого значения следует после =>, а не :. Также обратите внимание, что мы не определяли типы для firstName или lastName в самой function() — это потому, что мы определили их как часть переменной — поэтому нет необходимости делать это снова.

Заключение

После этого вы должны хорошо понимать, как типы работают в Typescript. В этой статье мы рассмотрели:

• Основные и наиболее распространенные типы Typescript

• Как определить типы переменных и функций в Typescript

• Как установить возвращаемый тип функции в Typescript

• Создание базовых пользовательских типов для объектов в Typescript

• Как создавать типы массивов и кортежей в Typescript

Надеюсь, вам понравилось это введение в типы Typescript. Вы можете найти больше материалов Typescript здесь.

• Впервые опубликовано [здесь] (https://fjolt.com/article/typescript-how-to-use-types)*