Для чего нужен interface в JavaScript?

Interface в JavaScript

Это частый вопрос на собеседованиях, потому что нужно разбираться в разнице между JavaScript и TypeScript, а также понимать концепцию интерфейсов в программировании.

Правильный ответ: Interface НЕ существует в JavaScript

Interface — это конструкция TypeScript, а не JavaScript. Когда TypeScript компилируется в JavaScript, все интерфейсы полностью удаляются.

// TypeScript
interface User {
  id: string;
  name: string;
  email: string;
}

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

После компиляции в JavaScript:

// Вся информация об интерфейсе удалена!
// Остаётся просто объект
const user = {
  id: '1',
  name: 'John',
  email: 'john@example.com'
};

Это важно понимать: interface существует только на время разработки и проверки типов. В runtime его вообще нет.

Зачем нужен Interface в TypeScript?

Interface — это контракт, который описывает форму объекта. Это позволяет:

1. Проверка типов на compile-time

interface Question {
  id: string;
  title: string;
  difficulty: number;
}

function displayQuestion(q: Question) {
  console.log(q.title);
}

// Правильно
displayQuestion({ id: '1', title: 'Q1', difficulty: 5 });

// Ошибка TypeScript! title отсутствует
displayQuestion({ id: '1', difficulty: 5 });

// Ошибка TypeScript! поле wrongField не существует
displayQuestion({ id: '1', title: 'Q1', difficulty: 5, wrongField: 'x' });

1. Документация кода

interface QuestionResponse {
  // ID вопроса
  id: string;
  // Заголовок вопроса
  title: string;
  // Правильный ответ (индекс в массиве вариантов)
  correctAnswerIndex: number;
  // Варианты ответов
  options: string[];
}

// Теперь каждый разработчик знает структуру данных
function handleQuestion(data: QuestionResponse) {
  // TypeScript знает все поля
}

1. Автодополнение в IDE

interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
}

function processUser(user: User) {
  user. // IDE покажет все доступные свойства
  // автодополнение работает!
}

Interface vs Type vs Class

// 1. Interface — контракт для объектов
interface UserInterface {
  id: string;
  name: string;
  greet(): void;
}

// 2. Type — может быть чем угодно (объект, объединение, примитив)
type UserType = {
  id: string;
  name: string;
};

type Status = 'active' | 'inactive';
type ID = string | number;

// 3. Class — реальная конструкция JavaScript (существует в runtime)
class User {
  id: string;
  name: string;

  constructor(id: string, name: string) {
    this.id = id;
    this.name = name;
  }

  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

const user = new User('1', 'John'); // Это работает в runtime
console.log(user instanceof User); // true

Interface с методами

interface QuestionService {
  getAll(): Promise<Question[]>;
  getById(id: string): Promise<Question>;
  create(data: CreateQuestionDTO): Promise<Question>;
  update(id: string, data: UpdateQuestionDTO): Promise<Question>;
  delete(id: string): Promise<void>;
}

// Теперь любой класс/объект который реализует этот интерфейс
// должен иметь все эти методы
class QuestionServiceImpl implements QuestionService {
  async getAll(): Promise<Question[]> {
    // Реализация
    return [];
  }

  async getById(id: string): Promise<Question> {
    // Реализация
    return {} as Question;
  }

  // Должны быть все методы
}

Interface vs Type — когда что использовать?

// Interface лучше для ОБЪЕКТОВ и КОНТРАКТОВ
interface User {
  id: string;
  name: string;
}

interface Repository<T> {
  getAll(): Promise<T[]>;
  getById(id: string): Promise<T>;
}

// Type лучше для всего остального
type UserRole = 'admin' | 'user';
type ID = string | number;
type Nullable<T> = T | null;

// Type может быть объединением интерфейсов
type QuestionWithStats = Question & { views: number; likes: number };

// Interface может расширять другие интерфейсы
interface AdminUser extends User {
  permissions: string[];
}

Optional и Required свойства

// Некоторые свойства опциональны
interface UserProfile {
  id: string;              // ОБЯЗАТЕЛЬНО
  name: string;            // ОБЯЗАТЕЛЬНО
  bio?: string;            // ОПЦИОНАЛЬНО (может отсутствовать)
  avatarUrl?: string;      // ОПЦИОНАЛЬНО
}

const user: UserProfile = {
  id: '1',
  name: 'John'
  // bio и avatarUrl не требуются
};

// Readonly свойства
interface ImmutableUser {
  readonly id: string;     // Не может быть изменено
  readonly name: string;
  email: string;           // Может быть изменено
}

const user: ImmutableUser = { id: '1', name: 'John', email: 'john@example.com' };
user.email = 'new@example.com'; // OK
user.id = '2'; // Ошибка TypeScript!

Реальный пример из API

// Что приходит с сервера
interface ApiResponse<T> {
  status: 'success' | 'error';
  data?: T;
  error?: string;
}

// Конкретный тип для вопросов
interface Question {
  id: string;
  title: string;
  text: string;
  category: string;
  difficulty: 1 | 2 | 3 | 4 | 5;
  options: QuestionOption[];
  correctAnswerIndex: number;
  createdAt: string; // ISO string
}

interface QuestionOption {
  id: string;
  text: string;
}

// Что отправляем на сервер
interface CreateQuestionDTO {
  title: string;
  text: string;
  category: string;
  difficulty: 1 | 2 | 3 | 4 | 5;
  options: string[];
  correctAnswerIndex: number;
}

// Использование в коде
async function fetchQuestions(): Promise<ApiResponse<Question[]>> {
  const response = await fetch('/api/questions');
  return response.json();
}

// Тип проверяется
const response = await fetchQuestions();
if (response.status === 'success' && response.data) {
  response.data.forEach(q => {
    console.log(q.title); // TypeScript знает что это string
  });
}

Generic interfaces

// Обобщённый интерфейс
interface ApiResponse<T> {
  status: 'success' | 'error';
  data?: T;
  error?: string;
}

interface Repository<T> {
  getAll(): Promise<T[]>;
  getById(id: string): Promise<T | null>;
  create(item: T): Promise<T>;
  update(id: string, item: T): Promise<T>;
  delete(id: string): Promise<void>;
}

// Использование
class QuestionRepository implements Repository<Question> {
  async getAll(): Promise<Question[]> { }
  async getById(id: string): Promise<Question | null> { }
  async create(item: Question): Promise<Question> { }
  async update(id: string, item: Question): Promise<Question> { }
  async delete(id: string): Promise<void> { }
}

// Один Repository работает с разными типами
type QuestionRepo = Repository<Question>;
type UserRepo = Repository<User>;
type ProfessionRepo = Repository<Profession>;

Где используются интерфейсы в фронтенде?

1. API интеграция:

// types/api.ts
interface GetQuestionsResponse {
  questions: Question[];
  total: number;
  page: number;
  pageSize: number;
}

// services/api.ts
async function getQuestions(page: number): Promise<GetQuestionsResponse> {
  const response = await fetch(`/api/questions?page=${page}`);
  return response.json();
}

2. Props для компонентов:

interface QuestionCardProps {
  question: Question;
  solved: boolean;
  onClick: (id: string) => void;
}

export function QuestionCard({ question, solved, onClick }: QuestionCardProps) {
  return (
    <div onClick={() => onClick(question.id)}>
      {question.title}
    </div>
  );
}

3. State management:

interface AppState {
  questions: Question[];
  currentQuestion: Question | null;
  selectedAnswers: Record<string, number>;
  isLoading: boolean;
  error: string | null;
}

Частая ошибка: Забыть что Interface исчезает

// Неправильно — interface всё равно исчезнет
interface User {
  id: string;
  name: string;
}

// В runtime это не сработает!
if (obj instanceof User) { // Ошибка! User не существует в runtime
  // ...
}

// Правильно — использовать type guard
function isUser(obj: unknown): obj is User {
  return (
    typeof obj === 'object' &&
    obj !== null &&
    'id' in obj &&
    'name' in obj
  );
}

if (isUser(obj)) {
  console.log(obj.name); // OK
}

Выводы

1. Interface не существует в JavaScript — это только TypeScript
2. Interface используется для типизации — контрактов объектов
3. Интерфейсы исчезают при компиляции — в runtime их нет
4. Interface помогает с:
   • Проверкой типов на compile-time
   • Документацией кода
   • Автодополнением в IDE
   • Разработкой контрактов между модулями
5. Используй Interface для объектов, Type для всего остального
6. Интерфейсы полезны в больших проектах где нужна типизация