TypeScript Interface проти Type: Найкращі практики оголошення для глобальних розробників

TypeScript, надмножина JavaScript, дає змогу розробникам у всьому світі створювати надійні та масштабовані додатки за допомогою статичної типізації. Двома фундаментальними конструкціями для визначення типів є Інтерфейси (Interfaces) та Типи (Types). Хоча вони мають спільні риси, розуміння їхніх нюансів та відповідних сценаріїв використання є вирішальним для написання чистого, підтримуваного та ефективного коду. Цей вичерпний посібник заглибиться у відмінності між інтерфейсами та типами в TypeScript, досліджуючи найкращі практики для їх ефективного використання у ваших проєктах.

Розуміння інтерфейсів у TypeScript

Інтерфейс (Interface) у TypeScript — це потужний спосіб визначити контракт для об'єкта. Він описує форму об'єкта, вказуючи властивості, які він повинен мати, їхні типи даних та, за бажанням, будь-які методи, які він повинен реалізовувати. Інтерфейси переважно описують структуру об'єктів.

Синтаксис та приклад інтерфейсу

Синтаксис для визначення інтерфейсу є простим:

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

const user: User = {
  id: 123,
  name: "Alice Smith",
  email: "alice.smith@example.com",
  isActive: true,
};

У цьому прикладі інтерфейс User визначає структуру об'єкта користувача. Будь-який об'єкт, присвоєний змінній user, повинен відповідати цій структурі; інакше компілятор TypeScript видасть помилку.

Ключові особливості інтерфейсів

• Визначення форми об'єкта: Інтерфейси чудово підходять для визначення структури або "форми" об'єктів.
• Розширюваність: Інтерфейси можна легко розширювати за допомогою ключового слова extends, що дозволяє успадкування та повторне використання коду.
• Злиття оголошень: TypeScript підтримує злиття оголошень для інтерфейсів, що означає, що ви можете оголошувати один і той же інтерфейс кілька разів, і компілятор об'єднає їх в одне оголошення.

Приклад злиття оголошень

interface Window {
  title: string;
}

interface Window {
  height: number;
  width: number;
}

const myWindow: Window = {
  title: "My Application",
  height: 800,
  width: 600,
};

Тут інтерфейс Window оголошено двічі. TypeScript об'єднує ці оголошення, ефективно створюючи інтерфейс із властивостями title, height та width.

Дослідження типів у TypeScript

Тип (Type) у TypeScript надає спосіб визначення форми даних. На відміну від інтерфейсів, типи є більш універсальними та можуть представляти ширший спектр структур даних, включаючи примітивні типи, об'єднання, перетини та кортежі.

Синтаксис та приклад типу

Синтаксис для визначення псевдоніма типу (type alias) є наступним:

type Point = {
  x: number;
  y: number;
};

const origin: Point = {
  x: 0,
  y: 0,
};

У цьому прикладі тип Point визначає структуру об'єкта точки з координатами x та y.

Ключові особливості типів

• Типи-об'єднання (Union Types): Типи можуть представляти об'єднання кількох типів, дозволяючи змінній містити значення різних типів.
• Типи-перетини (Intersection Types): Типи також можуть представляти перетин кількох типів, об'єднуючи властивості всіх типів в один.
• Примітивні типи: Типи можуть безпосередньо представляти примітивні типи, такі як string, number, boolean тощо.
• Типи-кортежі (Tuple Types): Типи можуть визначати кортежі, які є масивами фіксованої довжини з конкретними типами для кожного елемента.
• Більш універсальні: Можуть описувати майже все, від примітивних типів даних до складних форм об'єктів.

Приклад типу-об'єднання

type Result = {
  success: true;
  data: any;
} | {
  success: false;
  error: string;
};

const successResult: Result = {
  success: true,
  data: { message: "Operation successful!" },
};

const errorResult: Result = {
  success: false,
  error: "An error occurred.",
};

Тип Result є типом-об'єднанням, який може бути або успішним результатом з даними, або невдачею з повідомленням про помилку. Це корисно для представлення результату операцій, які можуть завершитися успішно або невдало.

Приклад типу-перетину

type Person = {
  name: string;
  age: number;
};

type Employee = {
  employeeId: string;
  department: string;
};

type EmployeePerson = Person & Employee;

const employee: EmployeePerson = {
  name: "Bob Johnson",
  age: 35,
  employeeId: "EMP123",
  department: "Engineering",
};

Тип EmployeePerson є типом-перетином, що поєднує властивості як Person, так і Employee. Це дозволяє створювати нові типи, комбінуючи існуючі.

Ключові відмінності: Interface проти Type

Хоча і інтерфейси, і типи служать для визначення структур даних у TypeScript, існують ключові відмінності, які впливають на те, коли використовувати один, а не інший:

1. Злиття оголошень: Інтерфейси підтримують злиття оголошень, а типи — ні. Якщо вам потрібно розширити визначення типу на кілька файлів або модулів, зазвичай краще використовувати інтерфейси.
2. Типи-об'єднання: Типи можуть представляти типи-об'єднання, тоді як інтерфейси не можуть безпосередньо визначати об'єднання. Якщо вам потрібно визначити тип, який може бути одним із кількох різних типів, використовуйте псевдонім типу.
3. Типи-перетини: Типи можуть створювати типи-перетини за допомогою оператора &. Інтерфейси можуть розширювати інші інтерфейси, досягаючи схожого ефекту, але типи-перетини пропонують більшу гнучкість.
4. Примітивні типи: Типи можуть безпосередньо представляти примітивні типи (string, number, boolean), тоді як інтерфейси переважно призначені для визначення форм об'єктів.
5. Повідомлення про помилки: Деякі розробники вважають, що інтерфейси пропонують дещо зрозуміліші повідомлення про помилки порівняно з типами, особливо при роботі зі складними структурами типів.

Найкращі практики: Вибір між Interface та Type

Вибір між інтерфейсами та типами залежить від конкретних вимог вашого проєкту та ваших особистих уподобань. Ось кілька загальних рекомендацій, які варто врахувати:

• Використовуйте інтерфейси для визначення форми об'єктів: Якщо вам переважно потрібно визначити структуру об'єктів, інтерфейси є природним вибором. Їхня розширюваність та можливість злиття оголошень можуть бути корисними у великих проєктах.
• Використовуйте типи для об'єднань, перетинів та примітивних типів: Коли вам потрібно представити об'єднання типів, перетин типів або простий примітивний тип, використовуйте псевдонім типу.
• Підтримуйте послідовність у вашій кодовій базі: Незалежно від того, обираєте ви інтерфейси чи типи, прагніть до послідовності у всьому проєкті. Використання єдиного стилю покращить читабельність та підтримуваність коду.
• Враховуйте злиття оголошень: Якщо ви передбачаєте необхідність розширення визначення типу на кілька файлів або модулів, інтерфейси є кращим вибором завдяки їхній функції злиття оголошень.
• Надавайте перевагу інтерфейсам для публічних API: При проєктуванні публічних API часто віддають перевагу інтерфейсам, оскільки вони більш розширювані та дозволяють споживачам вашого API легко розширювати визначені вами типи.

Практичні приклади: Сценарії глобальних додатків

Розглянемо кілька практичних прикладів, щоб проілюструвати, як інтерфейси та типи можна використовувати у глобальному додатку:

1. Управління профілем користувача (Інтернаціоналізація)

Припустимо, ви створюєте систему управління профілями користувачів, яка підтримує кілька мов. Ви можете використовувати інтерфейси для визначення структури профілів користувачів і типи для представлення різних кодів мов:

interface UserProfile {
  id: number;
  name: string;
  email: string;
  preferredLanguage: LanguageCode;
  address: Address;
}

interface Address {
    street: string;
    city: string;
    country: string;
    postalCode: string;
}

type LanguageCode = "en" | "fr" | "es" | "de" | "zh"; // Приклади кодів мов

const userProfile: UserProfile = {
  id: 1,
  name: "John Doe",
  email: "john.doe@example.com",
  preferredLanguage: "en",
  address: { street: "123 Main St", city: "Anytown", country: "USA", postalCode: "12345" }
};

Тут інтерфейс UserProfile визначає структуру профілю користувача, включаючи його бажану мову. Тип LanguageCode є типом-об'єднанням, що представляє підтримувані мови. Інтерфейс Address визначає формат адреси, припускаючи загальний глобальний формат.

2. Конвертація валют (Глобалізація)

Розглянемо додаток для конвертації валют, який повинен обробляти різні валюти та обмінні курси. Ви можете використовувати інтерфейси для визначення структури об'єктів валют і типи для представлення кодів валют:

interface Currency {
  code: CurrencyCode;
  name: string;
  symbol: string;
}

interface ExchangeRate {
  baseCurrency: CurrencyCode;
  targetCurrency: CurrencyCode;
  rate: number;
}


type CurrencyCode = "USD" | "EUR" | "GBP" | "JPY" | "CAD"; // Приклади кодів валют

const usd: Currency = {
  code: "USD",
  name: "United States Dollar",
  symbol: "$",
};

const exchangeRate: ExchangeRate = {
  baseCurrency: "USD",
  targetCurrency: "EUR",
  rate: 0.85,
};

Інтерфейс Currency визначає структуру об'єкта валюти, включаючи її код, назву та символ. Тип CurrencyCode є типом-об'єднанням, що представляє підтримувані коди валют. Інтерфейс ExchangeRate використовується для представлення курсів конвертації між різними валютами.

3. Валідація даних (Міжнародний формат)

При обробці даних, введених користувачами з різних країн, важливо валідувати дані відповідно до правильного міжнародного формату. Наприклад, номери телефонів мають різні формати залежно від коду країни. Типи можна використовувати для представлення варіацій.

type PhoneNumber = {
  countryCode: string;
  number: string;
  isValid: boolean; // Додайте логічне значення для представлення валідних/невалідних даних.
};

interface Contact {
   name: string;
   phoneNumber: PhoneNumber;
   email: string;
}


function validatePhoneNumber(phoneNumber: string, countryCode: string): PhoneNumber {
  // Логіка валідації на основі countryCode (наприклад, з використанням бібліотеки libphonenumber-js)
  // ... Тут реалізація для валідації номера.
  const isValid = true; //заглушка

  return { countryCode, number: phoneNumber, isValid };
}

const contact: Contact = {
    name: "Jane Doe",
    phoneNumber: validatePhoneNumber("555-123-4567", "US"), //приклад
    email: "jane.doe@email.com",
};


console.log(contact.phoneNumber.isValid); //вивід перевірки валідації.

Висновок: Опанування оголошень у TypeScript

Інтерфейси та типи TypeScript є потужними інструментами для визначення структур даних та покращення якості коду. Розуміння їхніх відмінностей та ефективне використання є важливим для створення надійних, підтримуваних та масштабованих додатків. Дотримуючись найкращих практик, викладених у цьому посібнику, ви зможете приймати обґрунтовані рішення щодо того, коли використовувати інтерфейси, а коли — типи, що в кінцевому підсумку покращить ваш робочий процес розробки на TypeScript та сприятиме успіху ваших проєктів.

Пам'ятайте, що вибір між інтерфейсами та типами часто є справою особистих уподобань та вимог проєкту. Експериментуйте з обома підходами, щоб знайти те, що найкраще підходить для вас та вашої команди. Використання потужності системи типів TypeScript, безсумнівно, призведе до створення більш надійного та підтримуваного коду, що принесе користь розробникам у всьому світі.