[TypeScript] Interfaces vs Classes vs Types

타입스크립트 개발자는 인터페이스, 클래스 또는 타입을 언제 활용해야 하는지 이해하는 것이 유지 관리가 가능하고 확장 가능한 코드를 만드는 데 매우 중요합니다. 각 구성 요소의 미묘한 차이를 분석하여 TypeScript 프로젝트의 다양한 시나리오에 적합한 도구에 대해 현명한 결정을 내릴 수 있도록 안내합니다.

 

Interface

목적

• 객체에 대한 컨트랙트를 정의하는 데 사용됩니다.
• 주로 객체의 모양을 설명하고 프로퍼티와 메서드의 예상 구조를 정의하는 데 사용됩니다.

주요 특징

• 구현 세부 사항을 포함할 수 없습니다.
• 새로운 인터페이스를 만들기 위해 확장할 수 있습니다.
• implements 키워드로 상속을 지원합니다.
• 클래스에서 구현할 수 있으며, 클래스가 특정 구조를 준수하도록 강제하는 방법을 제공합니다.

예제

interface Person {
  name: string;
  age: number;
  greet(): void;
}

class Student implements Person {
  name: string = '';
  age: number = 0;
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

 

Class

목적

• blueprint (class)를 기반으로 객체를 만드는 데 사용됩니다.
• 데이터(속성)와 동작(메서드)을 하나의 단위로 캡슐화합니다.
• 상속 및 캡슐화와 같은 개념을 지원합니다.

주요 특징

• 프로퍼티 선언과 메서드 구현을 모두 포함할 수 있습니다.
• 객체를 초기화하기 위한 생성자를 지원합니다.
• extends 키워드를 사용하여 다른 클래스를 확장할 수 있습니다.
• 접근 수정자(public, private, protected)를 사용하여 가시성을 제어할 수 있습니다.

예제

class Animal {
  private _name: string;

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

  get name(): string {
    return this._name;
  }

  makeSound() {
    console.log('Generic animal sound.');
  }
}

class Dog extends Animal {
  makeSound() {
    console.log('Woof!');
  }
}

 

Type

목적

• 타입의 별칭을 만드는 데 사용됩니다.
• 주로 복잡한 타입 조합을 만들거나 기존 타입에 대한 설명적인 이름을 제공하는 데 사용됩니다.

주요 특징

• 새 타입을 만들지 않고 기존 타입의 별칭을 만듭니다.
• primitive type, union type, intersection type 등에 사용할 수 있습니다.
• 재사용 가능한 타입 패턴을 만들기 위한 제네릭을 지원합니다.

예제

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

type Result = 'success' | 'error';

type User = {
  id: number;
  name: string;
};

type Admin = User & {
  role: 'admin';
};

 

각각의 사용 시기

다음과 같은 경우 Interface를 사용하십시오.

• 객체의 모양을 설명할 때.
• 클래스에 대한 컨트랙트 적용.

다음과 같은 경우 Class를 사용하십시오.

• 동작과 상태를 가진 객체를 만들 때.
• 데이터와 메서드 캡슐화.

다음과 같은 경우 Type을 사용하십시오.

• 재사용 가능한 타입 별칭 만들기.
• 기존 타입을 결합하거나 수정할 때.

 

마무리

인터페이스와 클래스가 함께 사용되는 경우가 많은데, 인터페이스는 구조를 정의하고 클래스는 그 구조를 구현합니다. 타입은 더 복잡한 타입 시나리오에 사용되거나 특히 union 타입이나 intersection의 맥락에서 타입에 대한 설명적인 이름을 제공하는 데 자주 사용됩니다.