TypeScript в реальных проектах: Как избегать any и повышать надежность кода

// До: Хрупкий код с any
const processData = (data: any) => {
  return data.map(item => item.name.toUpperCase()); // Crash при неверной структуре
};

// После: Предсказуемое поведение
type DataItem = { id: string; name: string };
const processData = (data: DataItem[]) => {
  return data.map(item => item.name.toUpperCase()); // Гарантия структуры
};

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

// Универсальный компонент:
type TableColumn<T> = {
  key: keyof T;
  title: string;
  render?: (item: T) => React.ReactNode;
};

function DataTable<T>({ data, columns }: { 
  data: T[]; 
  columns: TableColumn<T>[] 
}) {
  return (
    <table>
      {data.map((item) => (
        <tr>
          {columns.map(col => (
            <td>{col.render ? col.render(item) : item[col.key]}</td>
          ))}
        </tr>
      ))}
    </table>
  );
}

// Использование с конкретным типом:
type Product = { id: string; name: string; price: number };
const products: Product[] = [...];

<DataTable 
  data={products}
  columns={[
    { key: "name", title: "Название" },
    { 
      key: "price", 
      title: "Цена", 
      render: (item) => `$${item.price.toFixed(2)}` 
    }
  ]}
/>

// Опасный подход:
fetch('/api/user').then(res => res.json() as Promise<User>);

// Решение: Валидация + Type Guards
type Validated<T> = T & { __validated: true };

function isUser(data: unknown): data is User {
  return (
    typeof data === "object" &&
    data !== null &&
    "id" in data &&
    typeof data.id === "string" &&
    "email" in data &&
    typeof data.email === "string" &&
    /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)
  );
}

const validateResponse = async (response: unknown): Promise<Validated<User>> => {
  if (isUser(response)) {
    return { ...response, __validated: true };
  }
  throw new Error("Invalid user data");
};

// Упрощаем сложные типы:
type FormField<T> = {
  value: T;
  isValid: boolean;
  error?: string;
};

type UserForm = {
  name: FormField<string>;
  email: FormField<string>;
  preferences: {
    newsletter: FormField<boolean>;
    theme: FormField<'light' | 'dark'>;
  };
};

// Глубокое обновление:
type DeepPartial<T> = T extends object 
  ? { [K in keyof T]?: DeepPartial<T[K]> } 
  : T;

const updateForm = (form: UserForm, update: DeepPartial<UserForm>) => {
  // Безопасное обновление вложенных полей
};

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';

type ApiRoute<M extends HttpMethod, P extends string> = 
  `${M} /api/${P}`;

// Автодополнение и проверка:
const callApi = <M extends HttpMethod, P extends string>(
  route: ApiRoute<M, P>
) => { /* реализация */ };

// Правильно:
callApi('GET /api/users'); 

// Ошибка типизации:
callApi('PATCH /api/posts'); // TS: "PATCH" не входит в HttpMethod

// ❌ Плохо
const parseJSON = (json: string): any => JSON.parse(json);

// ✅ Решение 1: Generic с ограничением
const parseJSON = <T>(json: string): T => JSON.parse(json) as T;

// ✅ Решение 2: Безопасное приведение
const parseJSON = (json: string): unknown => JSON.parse(json);

function isUserArray(data: unknown): data is User[] {
  return Array.isArray(data) && data.every(isUser);
}