Для чего можно использовать интерфейс?

Для чего можно использовать интерфейсы в TypeScript

Интерфейсы — один из основных инструментов TypeScript для определения контрактов типов. Это критически важно для качественного кода.

Что такое интерфейс?

Интерфейс — это описание структуры объекта. Он определяет, какие свойства должны быть у объекта и какой тип они имеют.

interface User {
  id: number;
  name: string;
  email: string;
  age?: number; // опциональное свойство
}

const user: User = {
  id: 1,
  name: 'John',
  email: 'john@example.com'
};

Использование 1: Типизация функций

interface GetUserParams {
  id: number;
  includeOrders?: boolean;
}

interface GetUserResponse {
  id: number;
  name: string;
  orders?: Order[];
}

function getUser(params: GetUserParams): Promise<GetUserResponse> {
  // Реализация
  return fetch(`/api/users/${params.id}`)
    .then(res => res.json());
}

// Использование
const user = await getUser({ id: 1, includeOrders: true });

Плюсы:

• IDE автодополнение работает правильно
• Ошибки видны при разработке, не в runtime
• Документация встроена в код

Использование 2: Типизация props в React

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
  disabled?: boolean;
  size?: 'small' | 'medium' | 'large';
}

export function Button({ 
  label, 
  onClick, 
  variant = 'primary',
  disabled = false,
  size = 'medium'
}: ButtonProps) {
  return (
    <button
      className={`btn btn-${variant} btn-${size}`}
      onClick={onClick}
      disabled={disabled}
    >
      {label}
    </button>
  );
}

// Использование с проверкой типов
<Button label="Click me" onClick={() => console.log('clicked')} />
// Ошибка TypeScript!
// <Button label="Click me" onClick="invalid" />

Использование 3: Наследование и расширение интерфейсов

interface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  employeeId: number;
  department: string;
  salary: number;
}

interface Manager extends Employee {
  subordinates: Employee[];
  budget: number;
}

const manager: Manager = {
  name: 'Alice',
  age: 35,
  employeeId: 123,
  department: 'Engineering',
  salary: 100000,
  subordinates: [],
  budget: 500000
};

Преимущества:

• Переиспользование кода
• Иерархия типов отражает реальность
• Меньше дублирования

Использование 4: Объединение интерфейсов

interface Address {
  street: string;
  city: string;
  zipCode: string;
}

interface ContactInfo {
  email: string;
  phone: string;
}

interface UserProfile extends Address, ContactInfo {
  name: string;
  bio: string;
}

const profile: UserProfile = {
  name: 'John',
  bio: 'Developer',
  street: 'Main St',
  city: 'NYC',
  zipCode: '10001',
  email: 'john@example.com',
  phone: '+1234567890'
};

Использование 5: Опциональные и readonly свойства

interface Product {
  id: number;
  readonly name: string;      // Нельзя изменять
  price: number;
  description?: string;         // Опционально
  tags?: string[];              // Опциональный массив
  metadata?: Record<string, any>; // Опциональный объект
}

const product: Product = {
  id: 1,
  name: 'Laptop',
  price: 999
};

// Ошибка! name является readonly
// product.name = 'Desktop';

Использование 6: Индексные сигнатуры

interface Settings {
  [key: string]: string | number | boolean;
}

const appSettings: Settings = {
  theme: 'dark',
  fontSize: 14,
  notifications: true,
  customOption: 'custom'
};

// Доступ
console.log(appSettings['theme']);
console.log(appSettings.fontSize);

Использование 7: Методы в интерфейсах

interface API {
  get(url: string): Promise<any>;
  post(url: string, data: any): Promise<any>;
  put(url: string, data: any): Promise<any>;
  delete(url: string): Promise<any>;
}

class HttpClient implements API {
  async get(url: string): Promise<any> {
    const response = await fetch(url);
    return response.json();
  }
  
  async post(url: string, data: any): Promise<any> {
    const response = await fetch(url, {
      method: 'POST',
      body: JSON.stringify(data)
    });
    return response.json();
  }
  
  async put(url: string, data: any): Promise<any> {
    const response = await fetch(url, {
      method: 'PUT',
      body: JSON.stringify(data)
    });
    return response.json();
  }
  
  async delete(url: string): Promise<any> {
    const response = await fetch(url, { method: 'DELETE' });
    return response.json();
  }
}

Использование 8: Союзные типы в интерфейсах

interface SuccessResponse {
  status: 'success';
  data: User;
}

interface ErrorResponse {
  status: 'error';
  message: string;
  code: number;
}

type ApiResponse = SuccessResponse | ErrorResponse;

function handleResponse(response: ApiResponse) {
  if (response.status === 'success') {
    console.log(response.data.name);
  } else {
    console.error(response.message);
  }
}

Использование 9: Формы и валидация

interface FormField {
  name: string;
  type: 'text' | 'email' | 'password' | 'number';
  label: string;
  required: boolean;
  minLength?: number;
  maxLength?: number;
  pattern?: RegExp;
}

interface FormConfig {
  fields: FormField[];
  onSubmit: (data: Record<string, any>) => void;
  onError?: (errors: Record<string, string>) => void;
}

function Form({ fields, onSubmit, onError }: FormConfig) {
  // Реализация
  return (
    <form>
      {fields.map(field => (
        <input
          key={field.name}
          type={field.type}
          placeholder={field.label}
          required={field.required}
        />
      ))}
    </form>
  );
}

Использование 10: API типы

interface ApiRequest<T> {
  url: string;
  method: 'GET' | 'POST' | 'PUT' | 'DELETE';
  headers?: Record<string, string>;
  body?: T;
  timeout?: number;
}

interface ApiResponse<T> {
  status: number;
  data: T;
  headers: Record<string, string>;
}

async function request<RequestBody, ResponseBody>(
  config: ApiRequest<RequestBody>
): Promise<ApiResponse<ResponseBody>> {
  // Реализация
  return null as any;
}

// Использование
const response = await request<{ email: string }, { id: number }>({
  url: '/api/users',
  method: 'POST',
  body: { email: 'user@example.com' }
});

На собеседовании

Ответьте: "Интерфейсы использую для:

1. Типизации параметров и результатов функций — IDE помогает с автодополнением
2. Props компонентов React — Контракт между компонентом и родителем
3. Ответов API — Знаю, что приходит с бэкенда
4. Расширения через наследование — Иерархия типов
5. Readonly и опциональные поля — Безопасность и контроль
6. Методов объектов — Реализация интерфейса в классах
7. Валидации данных — Структура данных явно определена

Интерфейсы помогают прямо во время разработки найти ошибки, вместо того чтобы они проявились в runtime."