Что такое TypeScript и стоит ли использовать его вместо Vanilla JS?

TypeScript — это пользовательская версия JavaScript, созданная Microsoft, которая добавляет поддержку статической типизации, классов, перечислений и интерфейсов. Использование его для большого проекта JavaScript может сделать ваш код более организованным и простым для интеграции.

Что такое TypeScript?

TypeScript — не новый язык. Это синтаксический надмножество JavaScript — любой допустимый код JS является допустимым кодом TypeScript. TypeScript компилируется в простой JavaScript, который запускается в любом браузере. Поскольку это чисто аддитивный язык, уровень перевода очень прост, и его легко внедрить в существующий проект JavaScript.

Главное, что добавляет TypeScript — это, конечно же, статическая типизация. JavaScript по своей сути динамически типизирован. Это означает, что тип любой переменной или объекта может быть переназначен во время выполнения. Это делает JS очень гибким и простым в использовании, но, к сожалению, делает его беспорядочным при работе в большом проекте.

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

Например, эта базовая функция принимает параметр message , которому присвоен тип string с синтаксисом x: type . Это примитив JavaScript, но вы также можете определить свои собственные типы и структуры. Сама функция также возвращает строковое значение. Когда мы используем эту функцию позже в коде, мы можем навести на нее курсор и посмотреть, какие типы принимает функция и что она возвращает.

Хотя это может показаться ненужной дополнительной работой, это приводит к очень организованной кодовой базе и может повысить общую производительность. Одно из основных преимуществ статической типизации — более богатая поддержка IDE. Поскольку типы определены статически, IDE может гораздо проще проверять наличие простых ошибок.

Вот пример. Мы будем использовать VS Code для IDE, потому что он поставляется со встроенной поддержкой TypeScript от Microsoft, но плагины TypeScript доступны для многих текстовых редакторов. В этом приложении у нас есть простой компонент React, который принимает два свойства и отображает некоторый текст. В vanilla JS это будет выглядеть так:

С TypeScript мы не можем передать переменную props без присвоения ей типа, отсюда и ошибка выше. Вы можете отказаться от этой проверки, используя props: any, что делает его явно динамически типизированным, но лучше просто определить тип выше:

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

Если мы перейдем к использованию этого компонента в другом месте приложения, компилятор выдаст ошибку, говоря, что в компоненте Hello отсутствуют два свойства, определенные в HelloProps. Если бы это был более крупный и сложный компонент, вы могли бы упустить правильное определение реквизита, столкнуться с проблемами при тестировании и, в конце концов, осознать свою ошибку через минуту или две отладки. С TypeScript VS Code заранее будет предупреждать вас об этом.

Более того, вы получите функции автозаполнения по мере ввода. VS Code сообщит вам, какие аргументы нужны, когда вы их напечатаете.

А если вы работаете над большим проектом (или с зависимостями на основе TypeScript), вы сможете получить встроенную документацию, просмотрев определения типов:

Такого рода функции просто не существуют в ванильном JavaScript без ручной написания обширной встроенной документации.

В целом, TypeScript очень полезен для групп программистов, которые хотят организовать свои кодовые базы JavaScript. Перейти с JavaScript на TypeScript не так уж сложно; его легко понять, если вы уже знаете JavaScript, и, вероятно, он будет предпочтительнее для людей, которые работали с другими языками со статической типизацией, такими как Java и варианты C.

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

Другие возможности TypeScript

TypeScript не ограничивается простым добавлением статических типов — он добавляет целую кучу синтаксического сахара по сравнению с ванильным JS. Мы рекомендуем прочитать их Справочник, но мы также обсудим некоторые из самых крутых здесь.

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

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

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

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

function identity(arg: any): any {
  return arg;
}

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

function identity<T>(arg: T): T {
  return arg;
}

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

identity<string>()