Чего стоит избегать в TypeScript

Основные антипаттерны и ошибки в TypeScript

При работе с TypeScript существует множество подводных камней, которые могут свести на нет все преимущества типизации. Вот ключевые моменты, которых следует избегать.

1. Злоупотребление типом any

Использование any отключает проверку типов для переменной, что противоречит самой сути TypeScript. Вместо этого используйте более специфичные типы.

// ❌ Плохо
function processData(data: any) {
    return data * 2; // Никакой проверки типов
}

// ✅ Хорошо
function processData(data: number) {
    return data * 2; // TypeScript гарантирует, что data - число
}

// Если тип неизвестен, используйте unknown
function safeProcess(data: unknown) {
    if (typeof data === 'number') {
        return data * 2;
    }
    throw new Error('Invalid data type');
}

2. Избыточные аннотации типов

TypeScript обладает мощным выводом типов (type inference), поэтому не нужно явно указывать типы там, где они очевидны.

// ❌ Избыточно
const name: string = 'John';
const numbers: number[] = [1, 2, 3];
const user: { id: number; name: string } = { id: 1, name: 'John' };

// ✅ Лаконично
const name = 'John'; // Выведен тип string
const numbers = [1, 2, 3]; // Выведен тип number[]
const user = { id: 1, name: 'John' }; // Выведен тип { id: number; name: string }

3. Игнорирование строгого режима

Всегда включайте strict mode в tsconfig.json. Без него многие ошибки останутся незамеченными.

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true
  }
}

4. Неправильное использование non-null assertion operator (!)

Оператор ! говорит компилятору "я знаю, что это значение не null/undefined". Это опасно и может привести к ошибкам во время выполнения.

// ❌ Опасно
const element = document.getElementById('myElement')!;
element.innerHTML = 'Hello'; // Может вызвать ошибку, если элемента нет

// ✅ Безопасно
const element = document.getElementById('myElement');
if (element) {
    element.innerHTML = 'Hello';
}

// Или используйте optional chaining
element?.innerHTML = 'Hello';

5. Слишком сложные типы

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

// ❌ Слишком сложно
type ComplexType<T extends Record<string, any>> = {
    [K in keyof T]: T[K] extends infer U 
        ? U extends Array<infer V> 
            ? V extends object 
                ? ComplexType<V>[] 
                : V[] 
            : U extends object 
                ? ComplexType<U> 
                : U 
        : never;
};

// ✅ Проще и понятнее
interface User {
    id: number;
    name: string;
    contacts: Contact[];
}

interface Contact {
    email: string;
    phone?: string;
}

6. Игнорирование readonly для иммутабельности

Не указывать readonly для неизменяемых данных может привести к случайным мутациям.

// ❌ Мутабельно
interface Config {
    apiUrl: string;
    timeout: number;
}

// ✅ Иммутабельно
interface Config {
    readonly apiUrl: string;
    readonly timeout: number;
}

// Или используйте тип Readonly<T>
type ImmutableConfig = Readonly<Config>;

7. Неправильная обработка асинхронного кода

Использование Promise<any> вместо конкретных типов для промисов.

// ❌ Неопределенно
async function fetchData(): Promise<any> {
    const response = await fetch('/api/data');
    return response.json();
}

// ✅ Конкретно
interface ApiResponse {
    id: number;
    data: string;
    timestamp: Date;
}

async function fetchData(): Promise<ApiResponse> {
    const response = await fetch('/api/data');
    return response.json() as Promise<ApiResponse>;
}

8. Избегайте type assertions без необходимости

Type assertions (as) следует использовать только когда вы точно знаете тип лучше, чем TypeScript.

// ❌ Безосновательно
const value = getSomeValue() as string;

// ✅ С проверкой
const value = getSomeValue();
if (typeof value === 'string') {
    // Теперь TypeScript знает, что value - строка
}

// Допустимо только при уверенности
const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;

9. Не используйте enums для простых объединений

Для простых наборов значений предпочтительнее использовать union types.

// ❌ Избыточно
enum Status {
    Active = 'ACTIVE',
    Inactive = 'INACTIVE',
    Pending = 'PENDING'
}

// ✅ Проще
type Status = 'ACTIVE' | 'INACTIVE' | 'PENDING';

10. Игнорирование обработки ошибок

Не проверяйте результаты операций, которые могут вернуть null, undefined или вызвать исключения.

// ❌ Опасно
function parseJson(json: string) {
    return JSON.parse(json); // Может выбросить SyntaxError
}

// ✅ Безопасно
function parseJson(json: string) {
    try {
        return JSON.parse(json);
    } catch (error) {
        console.error('Failed to parse JSON:', error);
        return null;
    }
}

Ключевые принципы, которых следует придерживаться:

• Используйте максимально строгие настройки компилятора
• Предпочитайте unknown вместо any для работы с динамическими данными
• Лучше использовать интерфейсы для объектов, а типы для объединений и пересечений
• Документируйте сложные типы с помощью комментариев
• Регулярно обновляйте TypeScript и используйте новые возможности языка
• Пишите тесты для проверки корректности типов в сложных сценариях

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