TypeScript — один из самых популярных языков программирования. Его разработали в 2012 году в компании Microsoft, чтобы минимизировать основные недостатки JavaScript. Разбираемся, для чего нужен TypeScript, в каких проектах его применяют, из чего состоит этот язык и как его установить и настроить.
Что такое TypeScript
TypeScript — это улучшенный вариант JavaScript, который делает жизнь разработчиков легче, а большие приложения — надежнее. TypeScript используют для создания пользовательских интерфейсов, frontend- и backend-частей веб-сайтов, а еще больших бизнес-приложений, где важна долгосрочная поддержка и надежность.
С момента создания TypeScript активно развивается, сегодня это один из самых популярных языков программирования. По данным исследования StackOverflow 2022, его используют треть респондентов — 34,83% опрошенных разработчиков. В этом же опросе TypeScript занял четвертое место в категории «Наиболее любимые технологии».
По данным исследования StackOverflow 2022 года, почти 74% опрошенных разработчиков хотят продолжать работать на TypeScript. Источник — StackOverflow.co
Преимущества TypeScript
Если программист уже знаком с JavaScript, ему будет несложно освоить TypeScript: язык предлагает те же возможности плюс некоторые преимущества. Рассмотрим их подробнее.
Строгая типизация
Основное преимущество TypeScript перед JavaScript в том, что TS дает разработчику возможность явно объявить типы переменных и структур данных. TypeScript проверит правильность типов и сообщит об ошибке до того, как код приложения уйдет в продакшен.
Например, есть функция, которая принимает два числа и возвращает сумму. Если вместо числа в функцию передать строку, то JavaScript объединит оба аргумента в новую строку и вернет как валидный результат. Это приведет к непредсказуемым проблемам.
function add(a, b) {
return a + b;
}
add(2, 2); // 4
add(2, "not a number"); // 2not a number
TypeScript делает код управляемее. Можно явно сказать, какие типы ожидает и возвращает функция. Если передать строку — то вместо странного объединения числа со строкой мы получим ошибку.
function add(a: number, b: number): number {
return a + b;
}
add(2, "not a number"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.
Если типы не заданы явно, TypeScript может «догадаться» о типе переменной, основываясь на ее значении.
На курсе Skypro «Веб-разработчик» можно освоить базовый синтаксис JavaScript с нуля, научиться решать задачи frontend-разработки и работать в команде.
Хорошая документация
У TypeScript отличная документация, которая полностью представлена на официальном сайте. Microsoft сделали материалы доступными для всех, независимо от уровня и специализации: есть раздел для новичков, для JavaScript-разработчиков, для Java/C# и так далее.
А еще многие современные редакторы кода, например Visual Studio Code, идут со встроенной поддержкой TypeScript. Редактор подсвечивает синтаксис и исправляет простые ошибки, при вводе текста подсказывает названия методов и дает ссылки на документацию.
Функция IntelliSense обеспечивает интеллектуальное «дописывание» кода на основе типов переменных, определений функций и импортированных модулей. Источник — Visual Studio Code
Улучшенное ООП
Объектно-ориентированное программирование (ООП) — подход, при котором разработчик создает систему объектов и классов. Например, класс Human хранит в себе имя человека и метод greet, который возвращает приветствие:
class Human {
private name: string;
constructor(name: string) {
this.name = name;
}
public greet() {
return "Hello, " + this.name;
}
}
let jack = new Human("Jack");
jack.greet(); // "Hello, Jack"
let janie = new Human("Janie");
janie.greet(); // "Hello, Janie"
Хотя современный JavaScript поддерживает классы, TypeScript активнее использует возможности ООП.
Например, TS позволяет применять модификаторы доступа public/protected/private. Они помогают более тонко настроить доступ к методам и данным объекта и сделать работу с классами эффективнее. Еще TypeScript позволяет типизировать данные и методы класса — и типизировать сам класс с помощью интерфейсов:
interface IHuman {
greet: () => string;
}
class Human implements IHuman {
private name: string;
public greet() {
return "Hello, " + this.name;
}
}
Компиляция
<b><a href=»https://sky.pro/media/podborka-igr-dlya-izucheniya-programmirovaniya/»>Игры для изучения программирования</a>SQL Murder Mystery, Robocode, Code Monkey, Codingame и другие.</b>
JavaScript компилируется «на лету», во время исполнения программы. TypeScript компилирует код до исполнения. Компилятор берет TypeScript-код, проверяет синтаксис и типы и, если всё в порядке, удаляет информацию о типах и генерирует оптимизированный JavaScript-код. Дальше JS-код выполняется как обычно.
TypeScript не единственный язык программирования, который компилируется в JavaScript, но самый популярный. По данным опроса The State of JS 2021, TS однозначно лидер среди всех языков, компилируемых в JavaScript.
TypeScript используют почти 70% респондентов. Источник — The State of JS 2021
Транспиляция из коробкиПри компиляции TypeScript исходный код на одном языке преобразуется в код на другом. Этот процесс называют source-to-source-компиляцией, или транспиляцией. Такой подход позволяет исполнять TypeScript так же и в тех же средах, где работает JavaScript. И при этом отлаживать неполадки и находить ошибки, связанные с типами, до момента исполнения программы.
Недостатки TypeScript
У TypeScript есть и недостатки. Например, при довольно низком пороге входа сложность увеличивается с каждой очередной деталью. Зная JavaScript или другой похожий язык, можно легко начать писать на TypeScript. Но за кажущейся доступностью и простотой скрываются сложные концепции: типизация, наследование типов, дженерики и так далее. Чтобы выучить язык и разобраться во всех деталях и типах, придется потратить много времени.
Онлайн-университет Skypro предлагает стать Java-разработчиком за 11 месяцев. Это 440 часов обучения, мастер-классы с реальными рабочими задачами и пять проектов в портфолио. Полученные знания и навыки позволяют 95% студентов выйти на новую работу за четыре месяца.
В онлайн-университете Skypro можно освоить язык программирования Java за 11 месяцев на курсе «Java-разработчик».
Другой ощутимый недостаток TypeScript — браузеры пока что не умеют исполнять его, так что нужна трансляция в JavaScript. Нужно будет устанавливать специальный компилятор — это займет дополнительное время.
Как именно TypeScript улучшает JavaScript
Цель создания TypeScript — сделать JavaScript лучше. TypeScript добавляет в JavaScript типы, позволяя явно задавать их для всех структур данных. Это увеличивает читаемость кода и уменьшает количество ошибок в финальной сборке приложения.
Еще у TypeScript есть компилятор (транспайлер), который проверяет код на ошибки и помогает их исправить до выхода в продакшен.
TypeScript использует последние возможности JavaScript, которые поддерживают не все браузеры. Но при этом в TypeScript можно безопасно использовать весь потенциал JavaScript, не переживая за совместимость: в результате код будет скомпилирован в максимально совместимый со всеми браузерами JavaScript.
TypeScript легко начать применять в существующем проекте на JavaScript, постепенно обновляя старый код. Это позволяет легко перенести код на TypeScript, не уходя в затяжной рефакторинг. Такая опция критически важна в продуктовых командах, которые постоянно балансируют между выпуском новых фич и рефакторингом старого кода.
Писать проекты на JavaScript самостоятельно учат на курсе Skypro «Веб-разработчик». Все готовые проекты можно положить в портфолио, а специалисты центра карьеры помогают написать резюме и подготовиться к собеседованию. Устроиться на работу по новой специальности можно еще в процессе обучения.
Как работает TypeScript
Рассмотрим основные составляющие TypeScript и примеры кода.
Типы переменных
При объявлении переменной можно явно указать ее тип или позволить TypeScript узнать тип из значения.
let var1: string = 'Hi TypeScript'; let var2 = 'Hi TypeScript';
TypeScript поддерживает такие типы:
- String — строчки.
- Number — числа.
- Boolean — значение true или false.
- Symbol — уникальный идентификатор, обычно используется для ключей объектов.
- Any — специальный тип TypeScript, его используют, когда тип переменной точно не известен. Например, переменная может динамически менять тип.
- Void — тип, означающий отсутствие определенного типа. Например, используется, если функция ничего не возвращает.
- Undefined — тип означает, что значение еще не присвоено.
- Null — означает, что переменная недоступна.
Массивы
Так же, как и для переменных, TypeScript позволяет объявить типы для массивов.
let array1: number[] = [1, 2, 3]; let array2 = [1, 2, 3];
А еще у TypeScript есть специальный интерфейс Array, где T — тип массива.
let array4: Array = [1, 2, 3];
Кортежи
Кортежи (tuple) — это массивы с данными разного типа. Кортежи используют для хранения разнородной информации в одной сущности. Например, ID и имя пользователя.
let user: [number, string] = [123, 'Jack'];
Для доступа к значениям кортежа используется индекс массива.
user[0] // 123 user[1] // 'Jack'
Объекты
Как и в JavaScript, объекты в TypeScript — один из основных способов структурирования данных.
TypeScript может вывести тип объекта из значений его полей.
const user = {
id: 123,
name: 'Jack'
}
Можно присвоить анонимный тип.
const user: {
id: number;
name: string;
} = {
id: 123,
name: "Jack",
};
Или указать тип, используя интерфейс.
interface User {
id: number;
name: string;
}
const user: User = {
id: 123,
name: "Jack",
};
Также можно указать тип, используя псевдоним типа.
type User = {
id: number;
name: string;
}
const user: User = {
id: 123,
name: "Jack",
};
Аргументы функций и возвращаемые типы
TypeScript позволяет типизировать как передаваемые в функцию, так и возвращаемые значения. Обычно TypeScript может вывести возвращаемое значение без специальной аннотации. Но разработчики часто указывают значение явно, чтобы улучшить читабельность кода и упростить жизнь компилятору TypeScript.
function add(a: number, b: number): number {
return a + b;
}
Интерфейсы
Интерфейс — это особый тип, который подсказывает TypeScript, какие имена и типы свойств может иметь объект. При определении нового объекта TypeScript «в фоне» создает интерфейс к нему. Для следующего объекта TypeScript создаст интерфейс из двух полей: id с типом number и name с типом string.
const user = {
id: 123,
name: "Jack",
};
Интерфейсы могут быть определены и явно.
interface User {
id: number;
name: string;
}
const user: User = {
id: 123,
name: "Jack",
};
Таким образом, при работе с таким объектом TypeScript будет знать, из каких полей он состоит. Это позволит сделать необходимые проверки везде, где будет использоваться этот объект.
Еще одно преимущество работы с типизированными объектами — редактор кода сможет подсказать свойства объекта и давать подсказки по мере ввода кода.
Дженерики
Дженерики, или обобщенные типы, полезны в случаях, когда функция или класс могут работать с разными типами. Чтобы не дублировать код или чтобы не использовать тип any, можно создать «переменную типа». Таким образом тип можно будет задать позднее, во время вызова функции. Дженерики позволяют использовать типы, явно не задавая их.
Например, функции, которые конвертируют аргументы разного типа в массив, могут выглядеть так:
function stringToArray(value: String): Array {
return [value];
}
function numberToArray(value: Number): Array {
return [value];
}
function userToArray(value: User): Array {
return [value];
}
interface User {
id: number;
name: string;
}
Дженерики позволяют избежать дублирования и предопределить тип аргумента и возвращаемого значения. Как только функция получит значение определенного типа, мы будем уверены, что она вернет массив того же типа.
function valueToArray(value: T): Array {
return [value];
}
const array = convertToValueArray({ id: 123, name: 'Jack'})
array[0].id // 123
array[0].name // 'Jack'
array[0].city // Error: Property 'city' does not exist on type
Модификаторы доступа
Они управляют видимостью свойств и методов класса. В TypeScript есть три модификатора:
- Public — свойство или метод доступен как внутри класса, так и извне. Метод greet() можно вызывать за пределами класса. По умолчанию, если не указывать явно, все свойства и методы публичны.
- Private — доступ только внутри данного класса, свойство name не видно извне. Попытка обратиться извне приведет к ошибке.
- Protected — аналогичен private, разрешает доступ внутри данного класса, а также в классах-наследниках.
class Human {
private name: string;
constructor(name: string) {
this.name = name;
}
public greet() {
return "Hello, " + this.name;
}
}
Как установить и настроить TypeScript
Чтобы начать работать с TypeScript, понадобится Node.js. Затем установите NPM-пакет с помощью команды:
npm install -g typescript
И дальше, чтобы выполнить код:
tsc your-app.ts
Коротко о главном
TypeScript — активно развивающийся и популярный язык программирования. Он очень похож на JavaScript, но за счет типизации, компилятора и многих других возможностей является лучшей версией JS.
На TypeScript пишут сайты, веб-приложения, интерфейсы и системы, где необходима надежность и поддерживаемость. Отличная документация, большое сообщество и поддержка современными IDE сделают процесс изучения TypeScript простым и увлекательным.
Добавить комментарий