Как работать с TypeScript?

9 апреля 2024 г.

2 минуты

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

Содержание

Строгая типизация в TypeScript
Улучшенное объектно-ориентированное программирование
Дополнительные преимущества TypeScript
Заключение

Строгая типизация в TypeScript

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

Рассмотрим на примерах, как строгая типизация работает в TypeScript.

Определение типов переменных

В TypeScript каждая переменная может быть объявлена с конкретным типом:

let userName: string = "Alice";

let userAge: number = 30;

let isActive: boolean = true;

Попытка присвоить переменной значение неверного типа приведет к ошибке компиляции:

userName = 25; // Ошибка: Type 'number' is not assignable to type 'string'.

Функции с типизированными параметрами и возвращаемым значением

В TypeScript можно указать типы для параметров функции и для ее возвращаемого значения:

function add(x: number, y: number): number {

return x + y;

}

Вызов функции с параметрами неправильных типов приведет к ошибке:

add("Hello", 5); // Ошибка: Argument of type 'string' is not assignable to parameter of type 'number'

Использование интерфейсов и классов

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

interface User {

name: string;

age: number;

}

function greet(user: User): string {

return `Hello, ${user.name}! You are ${user.age} years old.`;

}

const user: User = {

name: "Alice",

age: 30,

};

greet(user); // ОК

greet({ name: "Bob", age: "thirty" }); // Ошибка: Property 'age' is of type 'string' but expected 'number'.

В этом примере greet ожидает объект типа User, и передача объекта с неправильными типами свойств приведет к ошибке компиляции.

Улучшенное объектно-ориентированное программирование

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

interface IUser {

id: number; // Обязательное свойство

name: string; // Обязательное свойство

email?: string; // Необязательное свойство

}

function printUser(user: IUser) {

console.log(`User ID: ${user.id}, Name: ${user.name}`);

if (user.email) {

console.log(`Email: ${user.email}`);

}

}

const user: IUser = {

id: 1,

name: "John Doe",

email: "john.doe@example.com"

};

printUser(user);

В этом примере интерфейс IUser определяет структуру объекта с тремя свойствами: id, name и email, где email необязателен. Функция printUser принимает объект, соответствующий интерфейсу IUser, и выводит его свойства в консоль.

Объект user создается согласно определению интерфейса IUser и передается в функцию printUser.

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

Public (публичный). Члены класса доступны из любого места.
Private (приватный). Члены класса доступны только внутри класса, который их объявил.
Protected (защищенный). Члены класса доступны внутри класса, который их объявил, и в классах, которые от него наследуются.

В будущем всё это может появиться и в JavaScript, но браузеры начнут поддерживать такие возможности еще очень нескоро.

Дополнительные преимущества TypeScript

Улучшение читабельности кода и командная работа

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

Более качественный код

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

Заключение

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