До 30 ноября

Скидки до 81 000 руб и вторая профессия в подарок!

Главная | Все статьи | Код

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

TypeScript Время чтения статьи ~3 минуты
Как работать с TypeScript? главное изображение

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

Познакомьтесь с Фронтенд разработкой бесплатно

Начните с этих 5 уроков

Строгая типизация в 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 есть три основных модификатора доступа:

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

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

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

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

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

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

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

Заключение

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

Познакомьтесь с Фронтенд разработкой бесплатно

Начните с этих 5 уроков

Аватар пользователя Анастасия Уминская
0
Рекомендуемые программы
профессия
Осваивайте разработку веб-страниц, оживляйте дизайн макетов, публикуйте сайты и приложения. Отслеживайте ошибки в интерфейсе и устраняйте их
10 месяцев
с нуля
Старт 28 ноября
профессия
Обучитесь разработке бэкенда сайтов и веб-приложений — серверной части, которая отвечает за логику и базы данных
10 месяцев
с нуля
Старт 28 ноября
профессия
Выполняйте ручное тестирование веб-приложений, находите ошибки в продукте. Узнайте все о тест-дизайне.
4 месяца
с нуля
Старт 28 ноября
профессия
Научитесь разработке веб-приложений, сайтов и программного обеспечения на языке Java, программируйте и используйте структуры данных
10 месяцев
с нуля
Старт 28 ноября
профессия
новый
Собирайте, анализируйте и интерпретируйте данные, улучшайте бизнес-процессы и продукт компании. Обучитесь работе с библиотеками Python
9 месяцев
с нуля
Старт 28 ноября
профессия
Занимайтесь созданием сайтов, веб-приложений, сервисов и их интеграцией с внутренними бизнес-системами на бекенд-языке PHP
10 месяцев
с нуля
Старт 28 ноября
профессия
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 28 ноября
профессия
Обучитесь разработке визуальной части сайта — фронтенда, а также реализации серверной — бэкенда. Освойте HTML, CSS, JavaScript
16 месяцев
с нуля
Старт 28 ноября
профессия
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 28 ноября
профессия
новый
Организовывайте процесс автоматизации тестирования на проекте, обучитесь языку программирования JavaScript, начните управлять процессом тестирования
8 месяцев
c опытом
Старт 28 ноября