Типы данных в TypeScript: Руководство для начинающих
- 16 февраля 2023
TypeScript — это JavaScript с типами, что логично. А вот и они, слева направо:
Boolean (булев тип)
Тип данных Boolean представляет логическое значение true или false. Вот пример:
let isWrote: boolean = false;
Что может пойти не так. Если мы не укажем тип и присвоим значение, не являющееся булевым, мы можем получить неожиданный результат, например, строка будет оценена как true.
let isDone: boolean = false;
if (isDone === "false") { // Ошибка: Это условие всегда будет ложным, поскольку типы 'boolean' и 'string' не пересекаются.
console.log("This should not be printed");
}
В этом примере мы правильно определили переменную isDone как булеву. Однако когда мы сравним isDone со строкой "false" с помощью оператора строгого равенства ===, TypeScript выдаст ошибку типа, поскольку эти два типа не пересекаются. Чтобы исправить эту ошибку, нам нужно сравнить isDone с булевым значением false, как показано ниже:
let isDone: boolean = false;
if (isDone === false) { // Ошибки нет
console.log("Этот текст выведется");
}
⭐ Хочется разобраться в TypeScript?
Приходите на наш курс. Там про типы пишут живые люди, а не нейросети.
Number (число)
Тип данных Number представляет как целочисленные значения, так и значения с плавающей точкой. Вот пример использования для чисел разных типов, включая шестнадцатеричные, двоичные и восьмеричные.
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octary: number = 0o744;
Что может пойти не так. Если мы попытаемся присвоить переменной с типом Number нечисловое значение, мы можем получить NaN (Not a Number).
let count: number = "5"; // Error: Type 'string' is not assignable to type 'number'.
let result = count * 2;
console.log(result);
В этом примере мы определили переменную count как число. Однако когда мы попытаемся присвоить count строку "5", TypeScript выдаст ошибку типа, поскольку эти два типа несовместимы. Чтобы исправить эту ошибку, нам нужно присвоить count число, как показано ниже:
let count: number = 5;
let result = count * 2;
console.log(result); // Выведется 10
String (строка)
Тип данных String представляет собой последовательность символов.
let color: string = "red";
Что может пойти не так. Если мы используем двойные кавычки для строки с одинарными кавычками или наоборот, TypeScript выдаст ошибку.
Array (массив)
Тип данных Array представляет собой коллекцию элементов одного типа.
let list: number[] = [1, 2, 3];
Что может пойти не так. Если мы попытаемся добавить элемент другого типа, TypeScript выдаст ошибку.
let list: number[] = [1, 2, 3];
list.push("four"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'
В этом примере мы определили переменную list как массив чисел. Однако когда мы попытаемся поместить строку "four" в массив list, TypeScript выдаст ошибку типа, поскольку строки не могут быть присвоены числам. Чтобы исправить эту ошибку, нам нужно либо удалить элемент строки, либо изменить переменную list на массив строк, как показано ниже:
// Вариант 1: не добавлять строковую переменную
let list: number[] = [1, 2, 3];
list.push(4);
console.log(list); // Вывод: [1, 2, 3, 4]
// Вариант два: использовать массив строк
let list: string[] = ["one", "two", "three"];
list.push("four");
console.log(list); // Output: ["one", "two", "three", "four"]
Tuple (кортеж)
Тип данных Tuple представляет собой массив с фиксированным количеством элементов разных типов.
let x: [string, number];
x = ["привет", 10];
Что может пойти не так. Если мы попытаемся добавить больше или меньше элементов, чем заданное число, TypeScript выдаст ошибку.
Enum (перечисление)
Тип данных Enum представляет собой набор именованных констант.
enum Color {
Red,
Green,
Blue,
}
let c: Color = Color.Green;
Что может пойти не так. Если мы попытаемся присвоить значение, которого нет в наборе именованных констант, TypeScript выдаст ошибку.
Any
Тип данных Any представляет любой тип.
let notSure: any = 4;
notSure = "может быть, вместо этого строка";
notSure = false;
Что может пойти не так. Использование Any противоречит идее TypeScript, поскольку Any позволяет присваивать переменной любой тип.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
AOT против JIT-компилятора: что лучше для разработки на Angular?
Angular — один из самых популярных фреймворков для фронтенда — предлагает два подхода к компиляции: предварительная компиляция и динамическая компиляция во время выполнения. Оба метода играют важную роль в оптимизации приложений на Angular и повышении их производительности. В этом материале мы рассмотрим различия между ними, их преимущества и разберёмся, когда стоит использовать каждый из подходов.
- 25 мая 2025
Динамические формы в Angular 19: пошаговое руководство
Формы — неотъемлемая часть большинства веб-приложений: будь то регистрация, ввод данных или опросы. Модуль реактивных форм в Angular отлично подходит для создания статичных форм, но во многих случаях требуется, чтобы форма могла динамически адаптироваться в зависимости от действий пользователя или внешних данных.
В этой статье мы рассмотрим, как создавать динамические формы с использованием автономных компонентов в Angular 19, применяя модульный подход, который избавляет от необходимости использовать традиционные модули Angular. В сопроводительном репозитории на GitHub для оформления форм используется Tailwind CSS, однако в статье внимание сосредоточено исключительно на логике динамических форм. Tailwind и связанные с ним настройки намеренно не включены в примеры, чтобы сохранить акцент на основной теме.
- 25 мая 2025
Как обнаружить изменения в Angular: пошаговая инструкция
Как разработчики на Angular, мы нередко задумываемся, как фреймворк отслеживает изменения в данных и затем отображает их во вьюхе. Этот процесс называется стратегией обнаружения изменений в Angular. В этом материале мы разберёмся, как это работает, и научимся выбирать подходящую стратегию для разных сценариев.
- 24 мая 2025
Компоненты в Angular 18: пошаговое руководство
Angular развивается стремительно, и с выходом версии 18 появились новые возможности, которые разработчики могут использовать в своей работе. Одним из ключевых изменений в Angular 18 стало удаление традиционного файла app.module.ts — ему на смену пришли standalone-компоненты. Если вы только начинаете работать с Angular или переходите с более ранней версии, это пошаговое руководство поможет вам разобраться в базовых принципах компонентов в Angular 18. Независимо от вашего уровня — новичок вы или опытный разработчик — этот туториал покажет, как создавать, управлять и эффективно использовать компоненты в Angular.
- 19 мая 2025
Полное руководство по Angular @if
Одно из самых заметных нововведений в Angular — это встроенный синтаксис для управляющих конструкций, который появился в версии 17. Он решает одну из самых частых задач, с которой сталкивается каждый разработчик: показывать или скрывать элементы на странице в зависимости от условия. Раньше для этого использовали привычную структурную директиву *ngIf. Теперь у нас есть более современная альтернатива — синтаксис @if, часть нового подхода к управлению шаблоном.
В этом гайде мы сравним оба варианта, разберёмся, чем @if лучше, и покажем, как можно перейти на него автоматически. Также поговорим об одной распространённой ошибке — о том, как не стоит использовать @if вместе с пайпом async.
- 18 мая 2025
Модули Angular для организации кода и ленивой загрузки
Модули — один из ключевых инструментов Angular для построения масштабируемых и поддерживаемых приложений. В этой статье мы подробно рассмотрим:
- что такое модули в Angular;
- зачем они нужны;
- как их использовать для структурирования кода;
- как реализовать «ленивую» загрузку модулей;
- и чем отличаются Feature, Core и Shared модули.
Если вы только начинаете изучать Angular или хотите углубить свои знания, эта статья поможет вам лучше понять, как правильно организовать архитектуру Angular-приложения.
- 12 мая 2025
Навигация в Angular: RouterLink, Router.navigate и Router.navigateByUrl
Директива RouterLink позволяет настраивать переходы между маршрутами прямо в шаблоне Angular. А методы Router.navigate и Router.navigateByUrl, доступные в классе Router, дают возможность управлять навигацией программно — прямо из кода компонентов.
Разберёмся, как работают RouterLink, Router.navigate и Router.navigateByUrl.
- 11 мая 2025
Полное руководство по Lazy Loading в Angular
Если вы создаёте большое Angular-приложение, вам наверняка важно, чтобы оно загружалось быстро. Представьте, что вы устраиваете вечеринку и хотите подавать закуски не сразу, а по мере прихода гостей, чтобы не перегрузить кухню. «Ленивая» загрузка в Angular работает примерно так же: вместо того чтобы загружать всё приложение целиком сразу, вы подгружаете только те части, которые нужны — и только когда они нужны.
В этом пошаговом руководстве мы разберём, как реализовать lazy loading в Angular.
- 10 мая 2025
Все (ну или почти все) способы автоматически перезагрузить страницу раз в N секунд
Иногда страницу нужно просто перезагрузить. Полностью. Не компонент, не блок, а именно целиком. Без обсуждений, без лишней логики. Например, чтобы:
- экран с результатами обновлялся каждые 10 секунд;
- интерфейс на стенде показывал последние данные без кнопок;
- страницы в интранете не устаревали, пока никто не смотрит.
Это можно сделать в любой связке: HTML, JS, Python, PHP, Go, Node.js — не важно. Ну и если говорить совсем прямо, то совсем разных способов всего три, а остальное просто вариации.
- 5 мая 2025
Поиск с конца массива в JavaScript: findLast и findLastIndex в JavaScript
С недавних пор в JavaScript появились два полезных метода для массивов: findLast и findLastIndex. Они делают то же, что и привычные find и findIndex, только проходят массив с конца.
- 5 мая 2025