Топ ошибок начинающих TypeScript разработчиков: продвинутый уровень

Топ ошибок начинающих TypeScript разработчиков: продвинутый уровень

TypeScript — мощный инструмент, который помогает писать более безопасный и предсказуемый код. Однако переход с JavaScript на TypeScript, особенно на продвинутом уровне, часто сопровождается специфическими ошибками. Даже разработчики, знакомые с основами типизации, совершают типовые просчёты при работе с дженериками, условными типами и перегрузками. В этой статье мы разберём 4 самые частые ошибки продвинутых новичков и покажем, как их исправить.

1. Неправильное использование Generic: потеря информации о типе

Одна из самых распространённых ошибок — слишком широкое или, наоборот, слишком узкое объявление дженериков. Разработчики часто указывают тип any внутри generic-функции, полностью нивелируя преимущества TypeScript.

Проблема

// Плохо: функция возвращает any, теряем типизацию
function getProperty(obj: any, key: string): any {
    return obj[key];
}

const user = { name: 'Alice', age: 30 };
const value = getProperty(user, 'name'); // value: any

Решение

// Хорошо: используем generic для сохранения типа
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

const user = { name: 'Alice', age: 30 };
const value = getProperty(user, 'name'); // value: string

Важно: всегда используйте ограничения extends для дженериков. Это не только сохраняет типы, но и даёт автодополнение в IDE.

2. Злоупотребление типом any вместо unknown

Многие начинающие разработчики ставят any везде, где не могут сразу определить тип. Это убивает всю пользу TypeScript. Правильный подход — использовать unknown и затем сужать тип.

Проблема

// Плохо: any позволяет делать что угодно
function parseData(data: any): void {
    console.log(data.toUpperCase()); // Ошибка в рантайме, если data — число
    data.someMethod(); // Никакой проверки
}

Решение

// Хорошо: unknown требует проверки
function parseData(data: unknown): void {
    if (typeof data === 'string') {
        console.log(data.toUpperCase()); // Безопасно
    } else if (Array.isArray(data)) {
        console.log(data.length);
    } else {
        console.log('Неизвестный тип данных');
    }
}

Используйте any только в крайних случаях (миграция с JS или работа с динамическими API). Для всего остального — unknown с гардами.

3. Ошибки при перегрузке функций (Function Overloads)

Перегрузка функций в TypeScript — мощный, но коварный механизм. Типичная ошибка: неправильный порядок сигнатур или несоответствие реализации заявленным перегрузкам.

Проблема

// Плохо: сигнатуры противоречат друг другу
function process(value: string): string;
function process(value: number): number;
function process(value: string | number): string | number {
    // Реализация не учитывает все случаи
    return value.toString(); // Возвращаем string, хотя обещали number для number
}

Решение

// Хорошо: чёткое разделение логики
function process(value: string): string;
function process(value: number): number;
function process(value: string | number): string | number {
    if (typeof value === 'string') {
        return value.toUpperCase(); // Возвращаем string
    } else {
        return value * 2; // Возвращаем number
    }
}

const result1 = process('hello'); // string
const result2 = process(10);      // number

Совет: всегда проверяйте, что реализация функции покрывает все варианты, объявленные в сигнатурах. Используйте typeof или пользовательские гарды.

4. Игнорирование строгих режимов компилятора

Многие новички отключают строгие настройки strict: true в tsconfig.json, чтобы "не мучиться". Это приводит к тому, что TypeScript пропускает потенциально опасные места.

Проблема

// tsconfig.json без strict
// "strict": false

// Компилятор не ругается на потенциальный null
function greet(name: string | null) {
    console.log(name.toUpperCase()); // Ошибка в рантайме при name = null
}

Решение

// Включаем strict режим
// tsconfig.json
// "strict": true

// Теперь TypeScript требует проверки
function greet(name: string | null) {
    if (name !== null) {
        console.log(name.toUpperCase()); // Безопасно
    } else {
        console.log('Имя не указано');
    }
}

Обязательно включите strict: true и дополнительные флаги: noImplicitAny, strictNullChecks, noUnusedLocals. Это спасёт вас от часов отладки.

Заключение

Продвинутый TypeScript — это не про сложные конструкции, а про дисциплину типизации. Ошибки, которые мы разобрали, возникают из-за желания "упростить" код или сэкономить время. На самом деле, правильное использование дженериков, замена any на unknown, аккуратные перегрузки и строгие настройки компилятора — это инвестиция в надёжность проекта.

Начните с малого: включите strict режим в вашем проекте и перепишите все функции с any на unknown с проверками. Вы увидите, как код станет прозрачнее, а баги исчезнут на этапе компиляции.