Ключевое слово as для утверждений типов
Осознанно переопределяйте выведенные типы с помощью as
«Ключевое слово as для утверждений типов» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.
Что такое утверждение типа
Утверждение типа сообщает компилятору: «поверьте, я знаю, что это значение имеет тип T». Для этого используется ключевое слово as: value as Type. Оно меняет представление значения для средства проверки типов, но не само значение.
const raw: unknown = 'hello world';
const text = raw as string;
console.log(text.toUpperCase());Синтаксис утверждения типа
Запишите выражение, затем as, а после него — целевой тип. Существует и старый синтаксис с угловыми скобками, но предпочтителен as, поскольку он работает везде, в том числе в файлах JSX/TSX.
const value: unknown = 42;
const n = value as number;
console.log(n + 8);Утверждения не меняют поведение во время выполнения
Это важно: утверждение — инструкция, действующая только на этапе компиляции. При запуске кода оно удаляется. Преобразования и проверки не выполняются: если утверждение неверно, значение во время выполнения не изменится, но программа может работать неправильно.
const v: unknown = 'not a number';
const n = v as number; // compiles, but v is still a string
console.log(typeof n); // 'string' at runtime!Когда утверждения допустимы
TypeScript разрешает прямые утверждения только между типами, которые пересекаются, то есть когда один из них можно присвоить другому. Можно утверждать, что unknown имеет тип string, а также расширять или сужать типы в рамках существующей связи между ними.
const u: unknown = 'ok';
const s = u as string; // valid: unknown overlaps everything
const broad = s as string | number; // valid widening
console.log(s, broad);Недопустимые прямые утверждения
Если два типа никак не пересекаются, TypeScript отклоняет прямое утверждение как вероятную ошибку. Например, прямое утверждение, что string имеет тип number, запрещено.
const s = 'hello';
// const n = s as number; // Error: neither type sufficiently overlaps
console.log('Direct unrelated assertions are blocked');Сужение объединения типов с помощью утверждения
Распространённый допустимый случай — утверждение, что значение объединённого типа имеет тип одного из его вариантов, когда Вам известно то, чего не знает компилятор. Используйте этот приём умеренно: проверка во время выполнения обычно безопаснее.
type Shape = { kind: 'circle'; r: number } | { kind: 'square'; s: number };
const data: Shape = { kind: 'circle', r: 5 };
const circle = data as { kind: 'circle'; r: number };
console.log(circle.r);Утверждение типов элементов DOM
Классический практический пример: запросы к DOM возвращают широкий тип вроде HTMLElement | null. Если Вы знаете конкретный элемент, укажите его тип, чтобы получить доступ к свойствам этого элемента.
// document.getElementById returns HTMLElement | null
// const input = document.getElementById('email') as HTMLInputElement;
// console.log(input.value);
console.log('Assert HTMLElement to HTMLInputElement for .value');Зачем нужны утверждения типов DOM
Интерфейсы DOM не могут знать, какой конкретный элемент Вы получите, поэтому возвращают общие типы. Утверждение конкретного подтипа, например HTMLInputElement, открывает доступ к таким свойствам, как value или checked.
// const canvas = document.querySelector('#c') as HTMLCanvasElement;
// const ctx = canvas.getContext('2d');
console.log('querySelector returns Element | null; assert to specialize');Утверждения с const — особый случай
Вы уже видели as const. Это особое утверждение, которое делает значение полностью доступным только для чтения и сохраняет литеральные типы. Это единственное утверждение, всегда безопасное, поскольку оно лишь сужает тип.
const tuple = [1, 2, 3] as const;
// type: readonly [1, 2, 3]
console.log(tuple.length);Утверждения обходят проверки безопасности
Поскольку утверждения велят компилятору прекратить проверки, ответственность переходит к Вам. Неверное утверждение может скрыть настоящую ошибку типов, пока она не приведёт к сбою во время выполнения. Используйте утверждения только тогда, когда действительно знаете больше компилятора.
const data: unknown = { id: 1 };
const user = data as { id: number; name: string };
// name does not exist at runtime
console.log(user.name); // undefined, no compile errorПредпочитайте сужение типа утверждениям
По возможности предпочитайте сужение типа во время выполнения с помощью проверок типа, а не утверждения. Сужение доказывает тип, а утверждение лишь заявляет его. Оставляйте as для случаев, которые нельзя выразить сужением, например для уточнения типов элементов DOM.
function safe(v: unknown): number {
if (typeof v === 'number') return v; // proven
return 0;
}
console.log(safe(10), safe('x'));Быстрая проверка
Проверьте, насколько хорошо Вы понимаете утверждения типов.
Повторение: утверждения типов
Вы узнали, что:
value as Typeвелит компилятору считать значение имеющим заданный тип.- Утверждения действуют только на этапе компиляции — преобразования и проверки во время выполнения не выполняются.
- Они разрешены только между пересекающимися типами.
- Распространённые допустимые случаи: сужение
unknownи уточнение типов элементов DOM. По возможности предпочитайте сужение типа.
Далее рассмотрим оператор утверждения ненулевого значения.
const raw: unknown = 'data';
const s = raw as string;
console.log(s.length);
Изучай TypeScript с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 101
- Уроки
- 352
Часто задаваемые вопросы
Урок «Ключевое слово as для утверждений типов» бесплатный?
Да — полный текст урока «Ключевое слово as для утверждений типов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Ключевое слово as для утверждений типов»?
Осознанно переопределяйте выведенные типы с помощью as Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать TypeScript Academy?
Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Ключевое слово as для утверждений типов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке TypeScript Academy?
Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Ключевое слово as для утверждений типов
- Оператор утверждения ненулевого значения
- Двойные утверждения и их риски
- Утверждения и проверки типов