[TypeScript] 인터페이스(Interface)와 타입 별칭(Type Alias) 비교

인터페이스(Interface)와 타입 별칭(Type Alias) 비교

들어가며

• 인터페이스(Interface)와 타입 별칭(Type Alias)은 타입스크립트에서 타입을 정의하는 방법이다.
• 타입스크립트(TypeScript)에서 인터페이스(Interface)와 타입 별칭(Type Alias)의 차이에 대해 정리해본다.

 

인터페이스(Interface)

개념

• 인터페이스는 주로 객체(Object)의 구조를 정의하는 데 사용된다.
• 주로 객체의 속성과 메서드를 정의하는 데 사용된다.
• 인터페이스를 구현하는 객체는 해당 인터페이스에서 요구하는 속성이나 메서드를 반드시 포함해야 한다.
• 코드에서 객체의 구조를 명확하게 정의하고, 다른 코드에서 해당 구조를 따르도록 강제할 때 유용하다.
• @interface@ 키워드를 이용하여 생성할 수 있다.

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

 

특징

• 인터페이스는 선언 병합(Declaration Merging)을 통해 같은 이름의 인터페이스가 여러 번 선언될 때 자동으로 병합된다.
• 인터페이스는 주로 객체의 구조를 정의하는 데 사용되며, 클래스(Class)와 함께 사용하여 클래스가 인터페이스의 구조를 따르도록 할 수 있다.
• 클래스는 인터페이스를 구현(@implements@) 할 수 있으며, 인터페이스에 정의된 모든 속성과 메서드를 클래스에서 반드시 구현해야 한다.

 

기능

선언 병합(Declaration Merging)

• 인터페이스는 같은 이름으로 여러 번 정의하면 타입스크립트가 자동으로 병합(Merge)하여 모든 정의를 포함하는 단일 인터페이스를 만든다.

interface Person {
  name: string;
}

interface Person {
  age: number;
}

// 최종 결과 : { name: string; age: number; }

 

클래스 구현

• 인터페이스는 클래스(Class)가 구현(@implements@) 할 수 있는 일종의 계약 사항(Contract)을 제공한다.

// 인터페이스 정의
interface Person {
  name: string;
  age: number;
  greet(): void;
}

// 클래스에서 인터페이스 구현
class Employee implements Person {
  name: string;
  age: number;

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

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

 

타입 별칭(Type Alias)

개념

• 특정 타입에 이름을 부여하는 방법
• 타입 별칭을 사용하면 다양한 타입(객체, 기본 타입, 유니언 타입, 교차 타입 등)에 이름을 붙여 코드에서 그 이름으로 해당 타입을 사용할 수 있다.
• 코드의 재사용성을 높이고, 특정 타입을 명확하게 표현할 수 있게 해준다.
• @type@ 키워드를 이용하여 생성할 수 있다.

// 기본 타입 별칭
type ID = string;
type Age = number;

// 객체 타입 별칭
type Person = {
  name: string;
  age: number;
};

// 유니언 타입 별칭
type NumberOrString = number | string;

// 문자열 형태 별칭
type Direction = 'up' | 'down' | 'left' | 'right';

 

특징

• 객체, 기본 타입(숫자, 문자열 등), 유니언 타입, 교차 타입 등 다양한 타입을 표현할 수 있다.
• 같은 이름으로 여러 번 선언할 수 없으며, 새로운 속성을 추가하거나 확장할 수 없다.
• 객체 타입뿐만 아니라, 기본 타입(Primitive Types)과 같은 단순한 타입도 별칭으로 정의할 수 있다.

 

기능

다양한 타입 표현

• 타입 별칭은 객체(Object) 외에도 기본 타입(Primitive Types), 유니언 타입(Union Types), 교차 타입(Intersection Types), 튜플(Tuple) 등 여러 종류의 타입을 표현할 수 있다.

type NumberOrString = number | string;   // 유니언 타입
type Person = {
  name: string;
  age: number;
};

 

Computed Properties

• 타입 별칭은 계산된 속성(Computed Property) 이름을 사용할 수 있다.
• 이 기능은 인터페이스(Interface)에서는 지원되지 않는다.

const propName = 'age';
type Animal = {
  [propName]: number; // computed property
};

let tiger: Animal = { [propName]: 5 };

 

병합 불가

• 타입 별칭은 선언 병합(Declaration Merging)이 불가능하다.
  • 같은 이름의 타입을 여러 번 선언하면 에러가 발생한다.

// 첫 번째 타입 별칭
type Person = {
  name: string;
};

// 두 번째 타입 별칭 (동일한 이름 사용)
type Person = {
  age: number;
};

// 오류 발생

 

요약

• 인터페이스와 타입 별칭의 주요 차이점을 요약해보면 아래와 같다.

특징	타입 별칭(Type Alias)	인터페이스(Interface)
기본 타입 정의	가능 (@number@, @string@, @union@ 타입 등)	불가능 (객체 구조만 정의 가능)
계산된 속성 (Computed Property)	가능	불가능
선언 병합 (Declaration Merging)	불가능	가능
클래스 구현 (Class Implementation)	불가능	가능
사용 용도	여러 타입을 표현할 때 (객체, 유니언, 튜플 등)	객체의 구조를 정의할 때

 

참고 사이트

W3Schools.com

Documentation - Declaration Reference