Давайте поговорим о том, что такое Typescript.

Typescript — это язык программирования как для front-end, так и для back-end разработки. Синтаксис и подход Javascript являются фундаментальными для Typescript. Некоторый код, который мы написали на Typescript, транспилируется в Javascript. Некоторые этого не делают.

Typescript — это язык программирования со строгой типизацией и статической проверкой типов. Это означает, что НЕТ проверки типов во время выполнения и НИКАКИХ ошибок времени выполнения, связанных с проверкой типов.

Здесь важно понять, что Typescript НЕ выполняется. Он транспилируется в Javascript, а затем запускается как Javascript. Транспиляция означает преобразование кода в код, исходный код в исходный код.

Он был создан для того, чтобы программисты могли защитить себя от глупости и не выстрелить себе в ногу, пока они пишут на Javascript.

Поскольку это фигурирует, давайте перейдем к следующей части.

Я не люблю говорить, что есть что-то, что вам нужно знать, а другие части можно пропустить. Причина в том, что каждый элемент необходим и должен быть, но некоторые функции вы будете использовать чаще, чем другие.

Элементы, которые вы собираетесь использовать чаще других:

Интерфейсы

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

Мы описываем интерфейсы с помощью простых интерфейсов ключевых слов. Внутри тела интерфейса мы можем описать пару ключ-значение, которую будет содержать объект.

interface User {
  email: string;
}

В качестве значения Интерфейса мы можем использовать любой тип данных, какой захотим — начиная от простых примитивов и заканчивая вашими пользовательскими интерфейсами, типами и перечислениями.

Что это для вас здесь? Что ж, теперь мы можем присвоить этот интерфейс нашей переменной и сказать, что наша переменная принадлежит этому конкретному интерфейсу.

const user: User = { email: “[email protected]” }

Хороший! Теперь Typescript знает, к какому типу принадлежит эта переменная, и вы защищены от вызова ключа, которого нет в объекте. Так, например, user.email будет работать хорошо, но user.password выдаст ошибку, что свойство не существует.

Когда мы используем интерфейс?

Простой ответ — всегда! Интерфейс — это ваш основной инструмент для определения свойств объекта.

Мы можем использовать Интерфейс для наследования или реализации, но это уже другая история.

Он не транспилируется в JS.

Типы

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

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

type User = {
  email: string
}

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

type CreateUser = (email: string) => User;

Теперь мы можем использовать вашу функцию как часть нашего пользовательского интерфейса, например:

interface Handlers {
  createUser: CreateUser
}

Кроме того, шрифт можно использовать как инструмент для хранения нескольких типов. Он называется TypeUnion. Например:

type StringOrNumber = string | number;

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

Теперь вы можете описывать литералы с типом, например:

type UserType = “admin” | “customer”;

Круто, да? Теперь мы сообщаем Typescript, что единственное значение, которое может содержать это свойство, — это литерал строки, такой как «admin» или «customer».

Подобно интерфейсам, типы могут использоваться для реализации или наследования.

Он не транспилируется в JS.

Интерфейс против типа

Вы спросите, а в чем разница? Ну, мы можем отметить следующее:

  1. Вы можете иметь несколько интерфейсов в одном лексическом окружении; если вы это сделаете, интерфейсы объединятся. Но у вас может быть только один тип в лексическом окружении.
  2. Вы можете использовать тип для назначений прямого типа. Разработчики могут использовать интерфейсы только для описания объектов.
  3. Тип может содержать ключ как настраиваемый тип данных, например Enum.

перечисление

Перечисления — фантастический инструмент, но, к сожалению, не очень широко используемый. Не используется, потому что у фронтенд-разработчиков нет близкой альтернативы перечислениям, а у бэкенд-разработчиков, наоборот, есть.

Что такое перечисления?

Enum — это просто пара ключ-значение, и она выглядит как объект. Обратите внимание, что я не описываю, во что он транспилируется. Я объясняю, как это работает, закрывающая абстракция.

Подход следующий:

enum UserType {
  Admin,
  Customer,
}

Этот подход будет иметь Admin или Customer в качестве ключей и 0 и 1 в качестве значений. Это решение представляет собой экономичный подход к хранению предопределенных данных на серверной части.

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

enum UserType {
  Admin = “admin”,
  Customer = “customer”
}

Теперь эти значения могут. Используется для определения интерфейсов (или типа):

interface User {
  email: string;
  type: UserType;
}

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

const user: User = {
  email: “[email protected]”, 
  type: UserType.Admin
}

Он транспилируется в JS.

Это все на сегодня. Увидимся в следующей главе.

Следуйте за мной, чтобы узнать больше.