타입스크립트 인터페이스(Interface) vs 타입(Type): 글로벌 개발자를 위한 선언 모범 사례

자바스크립트의 상위 집합인 타입스크립트는 전 세계 개발자들이 정적 타이핑을 통해 강력하고 확장 가능한 애플리케이션을 구축할 수 있도록 지원합니다. 타입을 정의하기 위한 두 가지 기본 구조는 인터페이스(Interfaces)와 타입(Types)입니다. 이 둘은 유사점을 공유하지만, 그 미묘한 차이와 적절한 사용 사례를 이해하는 것은 깨끗하고 유지보수하기 쉬우며 효율적인 코드를 작성하는 데 중요합니다. 이 종합 가이드에서는 타입스크립트 인터페이스와 타입의 차이점을 깊이 파고들어 프로젝트에서 이를 효과적으로 활용하기 위한 모범 사례를 탐구할 것입니다.

타입스크립트 인터페이스 이해하기

타입스크립트의 인터페이스(Interface)는 객체의 계약(contract)을 정의하는 강력한 방법입니다. 이는 객체가 가져야 할 속성, 해당 속성의 데이터 타입, 그리고 선택적으로 구현해야 할 메서드를 명시하여 객체의 형태를 개괄적으로 설명합니다. 인터페이스는 주로 객체의 구조를 설명하는 데 사용됩니다.

인터페이스 구문 및 예제

인터페이스를 정의하는 구문은 간단합니다:


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 변수에 할당된 모든 객체는 이 구조를 준수해야 하며, 그렇지 않으면 타입스크립트 컴파일러가 오류를 발생시킵니다.

인터페이스의 주요 특징

객체 형태 정의: 인터페이스는 객체의 구조 또는 "형태"를 정의하는 데 탁월합니다.
확장성: 인터페이스는 extends 키워드를 사용하여 쉽게 확장할 수 있어 상속과 코드 재사용을 가능하게 합니다.
선언 병합(Declaration Merging): 타입스크립트는 인터페이스에 대한 선언 병합을 지원합니다. 즉, 동일한 인터페이스를 여러 번 선언하면 컴파일러가 이를 단일 선언으로 병합합니다.

선언 병합 예제


interface Window {
  title: string;
}

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

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

여기서 Window 인터페이스는 두 번 선언되었습니다. 타입스크립트는 이러한 선언들을 병합하여 효과적으로 title, height, width 속성을 가진 인터페이스를 생성합니다.

타입스크립트 타입 탐구하기

타입스크립트의 타입(Type)은 데이터의 형태를 정의하는 방법을 제공합니다. 인터페이스와 달리 타입은 더 다재다능하며 원시 타입, 유니언, 인터섹션, 튜플을 포함한 더 넓은 범위의 데이터 구조를 나타낼 수 있습니다.

타입 구문 및 예제

타입 별칭(type alias)을 정의하는 구문은 다음과 같습니다:


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

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

이 예제에서 Point 타입은 x와 y 좌표를 가진 포인트 객체의 구조를 정의합니다.

타입의 주요 특징

유니언 타입(Union Types): 타입은 여러 타입의 합집합을 나타낼 수 있어 변수가 다른 타입의 값을 가질 수 있게 합니다.
인터섹션 타입(Intersection Types): 타입은 여러 타입의 교집합을 나타낼 수도 있어 모든 타입의 속성을 단일 타입으로 결합합니다.
원시 타입(Primitive 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의 속성을 모두 결합한 인터섹션 타입입니다. 이를 통해 기존 타입을 결합하여 새로운 타입을 생성할 수 있습니다.

주요 차이점: 인터페이스 vs 타입

인터페이스와 타입 모두 타입스크립트에서 데이터 구조를 정의하는 목적을 수행하지만, 어느 것을 언제 사용해야 할지에 영향을 미치는 주요 차이점이 있습니다:

선언 병합: 인터페이스는 선언 병합을 지원하지만, 타입은 그렇지 않습니다. 여러 파일이나 모듈에 걸쳐 타입 정의를 확장해야 하는 경우 일반적으로 인터페이스가 선호됩니다.
유니언 타입: 타입은 유니언 타입을 나타낼 수 있지만, 인터페이스는 직접적으로 유니언을 정의할 수 없습니다. 여러 다른 타입 중 하나가 될 수 있는 타입을 정의해야 한다면 타입 별칭을 사용하세요.
인터섹션 타입: 타입은 & 연산자를 사용하여 인터섹션 타입을 생성할 수 있습니다. 인터페이스는 다른 인터페이스를 확장하여 유사한 효과를 얻을 수 있지만, 인터섹션 타입이 더 많은 유연성을 제공합니다.
원시 타입: 타입은 원시 타입(string, number, boolean)을 직접 나타낼 수 있지만, 인터페이스는 주로 객체 형태를 정의하기 위해 설계되었습니다.
오류 메시지: 일부 개발자들은 특히 복잡한 타입 구조를 다룰 때 타입보다 인터페이스가 약간 더 명확한 오류 메시지를 제공한다고 생각합니다.

모범 사례: 인터페이스와 타입 중 선택하기

인터페이스와 타입 사이의 선택은 프로젝트의 특정 요구사항과 개인적인 선호도에 따라 달라집니다. 고려해야 할 몇 가지 일반적인 지침은 다음과 같습니다:

객체의 형태를 정의할 때는 인터페이스를 사용하세요: 주로 객체의 구조를 정의해야 하는 경우, 인터페이스가 자연스럽게 적합합니다. 인터페이스의 확장성과 선언 병합 기능은 대규모 프로젝트에서 유용할 수 있습니다.
유니언 타입, 인터섹션 타입, 원시 타입에는 타입을 사용하세요: 타입의 합집합, 교집합 또는 간단한 원시 타입을 나타내야 할 때는 타입 별칭을 사용하세요.
코드베이스 내에서 일관성을 유지하세요: 인터페이스나 타입 중 어느 것을 선택하든, 프로젝트 전반에 걸쳐 일관성을 유지하기 위해 노력하세요. 일관된 스타일을 사용하면 코드 가독성과 유지보수성이 향상됩니다.
선언 병합을 고려하세요: 여러 파일이나 모듈에 걸쳐 타입 정의를 확장해야 할 것으로 예상되는 경우, 선언 병합 기능 때문에 인터페이스가 더 나은 선택입니다.
공개 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"; // Example language codes

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"; // Example currency codes

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; // Add a boolean to represent valid/invalid data.
};

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


function validatePhoneNumber(phoneNumber: string, countryCode: string): PhoneNumber {
  // Validation logic based on countryCode (e.g., using a library like libphonenumber-js)
  // ... Implementation here to validate number.
  const isValid = true; //placeholder

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

const contact: Contact = {
    name: "Jane Doe",
    phoneNumber: validatePhoneNumber("555-123-4567", "US"), //example
    email: "jane.doe@email.com",
};


console.log(contact.phoneNumber.isValid); //output validation check.

결론: 타입스크립트 선언 마스터하기

타입스크립트 인터페이스와 타입은 데이터 구조를 정의하고 코드 품질을 향상시키는 강력한 도구입니다. 이들의 차이점을 이해하고 효과적으로 활용하는 것은 견고하고 유지보수 가능하며 확장 가능한 애플리케이션을 구축하는 데 필수적입니다. 이 가이드에서 설명한 모범 사례를 따르면, 인터페이스와 타입을 언제 사용해야 할지에 대해 정보에 입각한 결정을 내릴 수 있으며, 궁극적으로 타입스크립트 개발 워크플로우를 개선하고 프로젝트의 성공에 기여할 수 있습니다.

인터페이스와 타입 사이의 선택은 종종 개인적인 선호도와 프로젝트 요구사항의 문제라는 것을 기억하세요. 두 가지 접근 방식을 모두 실험하여 자신과 팀에 가장 적합한 방법을 찾아보세요. 타입스크립트의 타입 시스템의 힘을 받아들이는 것은 의심할 여지 없이 더 신뢰할 수 있고 유지보수하기 쉬운 코드로 이어져 전 세계 개발자들에게 혜택을 줄 것입니다.