타입스크립트에서 type과 interface의 차이점에 대해 알아보자

 

 typescript의 type과 interfaces는 비슷한 역할을 하지만 몇 가지 중요한 차이점이 있습니다. 이 글에서는 type과 interface의 특징과 차이점을 비교하여 언제 어떤 것을 사용하면 좋을지 살펴보겠습니다!

---

1. 기본 정의와 사용

type

type은 typescript의 타입 별칭을 정의하는 키워드입니다. 기본적으로 어떤 타입이든 별칭을 붙여 사용할 수 있습니다.

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

interface

interface는 객체 타입을 정의할 때 주로 사용됩니다. 클래스와의 호환성 덕분에 객체 지향 스타일의 코드에서 유용합니다.

interface Point {
  x: number;
  y: number;
}

---

2. 주요 차이점

확장 방식

• type: 유니온 타입과 교차 타입(Intersection)을 사용할 수 있으며 확장은 & 연산자를 통해 이루어집니다.

type Shape = { color: string };
type Circle = Shape & { radius: number };

• interface: extends 키워드를 사용하여 상속합니다.

interface Shape {
  color: string;
}
interface Circle extends Shape {
  radius: number;
}

유니온 타입 지원 여부

• type: 유니온 타입을 지원합니다.

type Input = string | number;

• interface: 유니온 타입을 직접적으로 지원하지 않습니다.

// Error: Interface does not support union types
interface Input = string | number; // ❌

선언 병합

• type: 동일한 이름의 타입을 여러 번 선언할 수 없습니다.

type User = { name: string };
type User = { age: number }; // Error: Duplicate identifier 'User'

• interface: 동일한 이름으로 여러 번 선언하면 병합됩니다.

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

const user: User = {
  name: 'Alice',
  age: 25,
};

기타 사용 가능한 타입

• type: Primitive, 튜플, 유니온 타입 등 다양한 타입을 정의할 수 있습니다.

type ID = string | number;
type Tuple = [number, string];

• interface: 객체 타입 정의에 초점이 맞춰져 있습니다. 기본적으로 primitive나 튜플 타입 정의는 불가능합니다.

interface Tuple { 0: number; 1: string; } // 가능하지만 권장되지 않음

---

3. 공통점

1. 구조적 타이핑: type과 interface 모두 구조적 타이핑(Structural Typing)을 따릅니다. 즉, 정의된 속성과 일치하는 객체는 해당 타입으로 간주됩니다.

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

const p: Point = { x: 1, y: 2 };
const p2: PointInterface = { x: 1, y: 2 };

1. 함수 정의: 둘 다 함수 타입을 정의할 수 있습니다.

type Add = (a: number, b: number) => number;
interface Add {
  (a: number, b: number): number;
}

1. 제네릭 지원: 둘 다 제네릭 타입을 지원합니다.

type Wrapper<T> = { value: T };
interface Wrapper<T> {
  value: T;
}

---

4. 언제 무엇을 사용할까?

1. 객체 중심 설계:
   • interface는 객체 지향 스타일의 코드와 잘 맞으며, 선언 병합 기능 덕분에 확장성이 뛰어납니다.
2. 유니온 타입 필요:
   • 유니온 타입이나 튜플 등 다양한 타입을 정의해야 한다면 type을 사용하는 것이 적합합니다.
3. 호환성 고려:
   • interface는 기존 JavaScript의 클래스와 잘 호환되며, 런타임에 영향을 미치지 않습니다.
4. 팀 컨벤션:
   • 팀 내 스타일 가이드나 컨벤션에 따라 선택할 수 있습니다. 대부분의 경우 interface와 type은 혼용될 수 있습니다.

---

5. 결론

type과 interface는 많은 기능을 공유하며 대다수의 상황에서 둘 중 어느 것을 사용해도 큰 차이는 없습니다. 하지만, 확장성과 사용 목적에 따라 적합한 선택을 해야 합니다. 객체 타입 정의나 선언 병합이 필요하다면 interface, 유니온 타입이나 복잡한 타입 구성이 필요하다면 type이 더 적합하다고 합니다!!! 그럼 안농