Frontend Academy · Урок

Строгий режим и устранение any

Включите все флаги строгого режима в tsconfig, используйте unknown вместо any, безопасно применяйте утверждения типов и перенесите файл со слабой типизацией в строгий режим

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

Зачем нужен строгий режим

strict: true в tsconfig.json включает все флаги безопасности TypeScript — это стандарт для серьёзных проектов. Он обнаруживает ошибки с null, параметры без типов и небезопасные присваивания во время компиляции.

Что включает strict

strict — это метафлаг, который включает: noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, alwaysStrict, noImplicitThis, useUnknownInCatchVariables.

strictNullChecks

Без этого флага null и undefined можно присвоить любому типу — это постоянный источник ошибок. При его включении необходимо явно обрабатывать случаи с null.

// Without strictNullChecks — runtime error:
function greet(name: string) { return name.toUpperCase(); }
greet(null); // compiler allows, crashes at runtime

// With strictNullChecks:
function greet(name: string | null) {
  if (name == null) return '';
  return name.toUpperCase();
}

noImplicitAny

Без этого флага параметры без аннотации типа по умолчанию получают тип any, что незаметно обходит систему типов. При включённом noImplicitAny необходимо добавлять для них аннотации.

// Without noImplicitAny:
function format(value) { return value.toUpperCase(); } // value: any

// With:
function format(value: string) { return value.toUpperCase(); }

strictPropertyInitialization

Свойства классов без гарантированного начального значения становятся потенциально неопределёнными. Инициализируйте их или используйте оператор гарантированного присваивания !.

class User {
  name!: string;     // tell TS: I'll set this elsewhere
  age = 0;           // default initialiser
  email: string;     // ERROR with strictPropertyInitialization
  constructor(email: string) { this.email = email; } // FIX: init in ctor
}

Используйте unknown вместо any

any отключает проверку типов. unknown безопасен с точки зрения типов — перед использованием его необходимо сузить. Всегда отдавайте предпочтение unknown.

// any — no checks, bug magnet:
function parse(input: any) {
  return input.toUpperCase(); // compiler is fine, runtime may crash
}

// unknown — must narrow:
function parse(input: unknown) {
  if (typeof input === 'string') {
    return input.toUpperCase();
  }
  throw new Error('Expected string');
}

Безопасные утверждения типов

Если необходимо выполнить утверждение (Вы лучше знаете тип, чем TS), предпочитайте синтаксис as. Не используйте двойные утверждения (x as unknown as T), если это действительно не необходимо: это признак проблем в коде.

const el = document.getElementById('app') as HTMLDivElement;
el.style.background = 'blue';

// Safer alternative: runtime check
const el = document.getElementById('app');
if (!(el instanceof HTMLDivElement)) throw new Error('app missing');
el.style.background = 'blue'; // narrowed to HTMLDivElement

Как устранить any из проекта

Стратегия: включите строгий режим и исправляйте возникающие ошибки по одному файлу за раз. Используйте unknown и сужение типа. Добавляйте @ts-expect-error с комментарием TODO для заведомо проблемных мест, чтобы их нельзя было оставить без внимания.

Правило линтера: no-explicit-any

Добавьте @typescript-eslint/no-explicit-any в конфигурацию ESLint, чтобы запретить добавление новых случаев any.

// .eslintrc.json
{
  "rules": {
    "@typescript-eslint/no-explicit-any": "error"
  }
}

strictFunctionTypes

Включает проверку параметров функций по контравариантности — предотвращает присваивание функций с более общими типами параметров, чем ожидается, которое могло бы привести к сбою во время выполнения.

Тип переменной catch

useUnknownInCatchVariables заставляет TypeScript выводить для catch (e) тип e: unknown вместо any. Перед обращением к свойствам необходимо сузить тип.

try {
  doRisky();
} catch (e) {
  // e is unknown
  if (e instanceof Error) {
    console.error(e.message);
  } else {
    console.error('Unknown error', e);
  }
}

Советы по миграции

Включайте строгий режим в новых проектах с самого начала. Для устаревшего кода включайте флаги постепенно. Начните с strictNullChecks (наибольший эффект), затем добавьте noImplicitAny. Используйте //@ts-expect-error вместо //@ts-ignore, чтобы комментарий можно было удалить после исправления проблемы.

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

Почему unknown безопаснее, чем any, когда тип значения неизвестен?

Итоги: строгий режим

Включите strict: true для полной безопасности. strictNullChecks требует обработки null. noImplicitAny требует аннотаций параметров. strictPropertyInitialization проверяет поля классов. Используйте unknown вместо any и сужайте тип с помощью проверок типов. Избегайте двойных утверждений. Проверяйте код с помощью правила no-explicit-any. Переносите устаревший код по одному файлу за раз, используя маркеры @ts-expect-error.

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

Урок «Строгий режим и устранение any» бесплатный?

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

Чему я научусь в уроке «Строгий режим и устранение any»?

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

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

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

Сколько времени занимает урок «Строгий режим и устранение any»?

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

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

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

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

← Назад к Frontend Academy