0Pricing
TypeScript Academy · Урок

Контекстная типизация: вывод из контекста

Разберитесь, как TypeScript выводит типы из окружающего контекста

«Контекстная типизация: вывод из контекста» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.

Что такое контекстная типизация?

Контекстная типизация происходит, когда TypeScript выводит тип выражения на основе его позиции: тип предоставляет контекст, а не само значение.

document.addEventListener("click", (e) => {
  // e is inferred as MouseEvent from the event type
  console.log(e.clientX);
});

Контекстная типизация в обратных вызовах

Когда Вы передаёте обратный вызов в типизированную функцию, TypeScript выводит типы параметров из ожидаемой сигнатуры обратного вызова.

const nums = [1, 2, 3];
nums.forEach((n) => {
  // n inferred as number from Array<number>
  console.log(n.toFixed(2));
});

Контекстная типизация и литералы объектов

Когда литерал объекта присваивается переменной с заданным типом, типы его свойств выводятся из этого типа, что позволяет выполнять точные проверки.

interface Config { timeout: number; retries: number; }
const config: Config = {
  timeout: 3000,
  retries: 3,
  // extra: true // Error: excess property
};

Контекстная типизация в JSX

В React свойства обработчиков событий получают тип из контекста, поэтому типы параметров событий выводятся автоматически.

function Button({ onClick }: { onClick: (e: React.MouseEvent) => void }) {
  return <button onClick={onClick}>Click</button>;
}
// Caller: e is inferred as React.MouseEvent
<Button onClick={(e) => console.log(e.currentTarget)} />

Контекстная типизация и явные аннотации

Контекстная типизация эффективна, но её можно переопределить явными аннотациями. Если присутствуют оба варианта, явная аннотация имеет приоритет над контекстной.

const handler: (x: string) => void = (x: number) => {}; // Error
// Explicit annotation (number) conflicts with contextual (string)

Контекстная типизация при деструктуризации

Деструктурированные параметры функций с контекстной типизацией также наследуют свои типы из контекста.

const pairs: [string, number][] = [["a", 1]];
pairs.forEach(([key, value]) => {
  // key: string, value: number — contextually typed
  console.log(key.toUpperCase(), value * 2);
});

Контекстная типизация и возвращаемые типы

Когда функция присваивается переменной с заданным типом, её возвращаемый тип также выводится из контекста.

type Transform = (x: number) => string;
const double: Transform = (x) => x * 2; // Error: number not string
const str: Transform = (x) => String(x * 2); // OK

Контекстная типизация в условных выражениях

TypeScript может передавать контекстные типы в тернарные выражения и логические операторы.

const result: string | null =
  Math.random() > 0.5 ? "yes" : null; // both arms typed by context

Ограничения контекстной типизации

Контекстная типизация не применяется, когда выражение находится в позиции без контекста, например в отдельной переменной без аннотации.

const fn = (x) => x + 1; // x: any — no context to infer from
// Add annotation: const fn = (x: number) => x + 1;

Двунаправленный вывод типов

TypeScript выполняет двунаправленный вывод типов: сверху вниз, из контекста, и снизу вверх, из выражения. Эти направления взаимодействуют и позволяют получить наиболее точный тип.

function apply<T>(fn: (x: T) => T, val: T): T { return fn(val); }
apply((x) => x.toUpperCase(), "hello"); // x inferred as string

Итоги: контекстная типизация

Контекстная типизация позволяет TypeScript выводить типы из позиции использования выражения. Такой механизм полезен для обратных вызовов, присваиваний, свойств JSX и деструктуризации.

Быстрая проверка

Когда контекстная типизация применяется к параметру обратного вызова?

Что Вы узнали

Контекстная типизация — это вывод TypeScript типов из позиции, а не из значения. Она делает обратные вызовы, обработчики событий и типизированные присваивания лаконичными и одновременно безопасными с точки зрения типов.

Часто задаваемые вопросы

Урок «Контекстная типизация: вывод из контекста» бесплатный?

Да — полный текст урока «Контекстная типизация: вывод из контекста» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Контекстная типизация: вывод из контекста»?

Разберитесь, как TypeScript выводит типы из окружающего контекста Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Контекстная типизация: вывод из контекста»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Механика расширения и сужения типов
  2. Контекстная типизация: вывод из контекста
  3. Свежесть и проверка лишних свойств
  4. Утверждения const и as const
← Назад к TypeScript Academy