Type, 또는 Interface, 그것이 문제로다 (TypeScript에서)

TypeScript에서 type과 interface는 모두 타입을 정의하는 데 사용되며, 많은 경우에 서로 대체 가능합니다. 그러나 몇 가지 중요한 차이점과 특정 사용 사례가 있습니다. type과 interface의 차이점을 자세히 살펴보기 전에 기본적인 사용법을 먼저 살펴보겠습니다.

1. 기본 사용법: type과 interface로 객체 타입 정의하기

// interface 사용
interface User {
  name: string;
  age: number;
}

// type 사용
type UserType = {
  name: string;
  age: number;
};

const user1: User = { name: 'Alice', age: 25 };
const user2: UserType = { name: 'Bob', age: 30 };

이 예제에서 interface와 type 모두 객체 타입을 정의할 수 있으며, 사용법에 거의 차이가 없습니다.

2. 확장 (Extend)

2.1 interface 확장

interface는 상속을 사용하여 확장할 수 있습니다.

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

interface Admin extends User {
  role: string;
}

const admin: Admin = {
  name: 'Alice',
  age: 30,
  role: 'Administrator',
};

2.2 type 확장

type은 교차 타입(intersection types)을 사용하여 확장할 수 있습니다.

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

type AdminType = UserType & {
  role: string;
};

const adminType: AdminType = {
  name: 'Bob',
  age: 35,
  role: 'Admin',
};

차이점:

• interface는 extends 키워드를 사용하여 상속합니다.
• type은 & (교차 타입)을 사용하여 확장합니다.

3. 선언 병합 (Declaration Merging)

3.1 interface의 선언 병합

interface는 동일한 이름으로 여러 번 선언할 수 있습니다. TypeScript는 자동으로 멤버들을 병합합니다.

interface User {
  name: string;
}

interface User {
  age: number;
}

const user: User = { name: 'Alice', age: 25 }; // 병합된 User 인터페이스는 name과 age 속성을 모두 포함합니다.

3.2 type은 선언 병합을 지원하지 않음

type은 중복 선언을 허용하지 않으며, 중복 선언 시 오류가 발생합니다.

type UserType = {
  name: string;
};

// 동일한 타입을 다시 선언하면 오류가 발생합니다.
type UserType = {
  age: number; // Error: Duplicate identifier 'UserType'.
};

차이점:

• interface는 선언 병합을 지원하여 여러 선언을 결합할 수 있습니다.
• type은 선언 병합을 지원하지 않습니다.

4. 유니온 타입과 교차 타입

4.1 type은 유니온 및 교차 타입을 지원

type은 유니온 타입과 교차 타입 정의를 지원하며, interface는 지원하지 않습니다.

// 유니온 타입
type Status = 'success' | 'error' | 'loading';

// 교차 타입
type Name = { name: string };
type Age = { age: number };
type Person = Name & Age;

const person: Person = { name: 'Alice', age: 25 };

4.2 interface는 유니온 타입을 지원하지 않음

interface는 유니온 타입을 직접 정의할 수 없습니다.

// 지원되지 않음
interface Status = "success" | "error" | "loading"; // Error

차이점:

• type은 유니온 및 교차 타입을 지원하여 여러 타입을 결합할 때 더 유연합니다.
• interface는 유니온 타입을 정의할 수 없지만, 객체 타입을 확장할 수 있습니다.

5. 타입 별칭 (Type Aliases)

type은 기본 자료형, 튜플, 유니온 타입 등 다양한 타입에 대한 별칭을 정의할 수 있습니다.

// 기본 타입 별칭 정의
type ID = number | string;

// 튜플 타입 정의
type Point = [number, number];

const id: ID = 123;
const point: Point = [10, 20];

반면에 interface는 객체 타입만 정의할 수 있습니다.

6. 구현 (Implements) 및 확장 (Extends)

6.1 클래스 구현을 위한 interface

interface는 클래스의 구조를 제한할 수 있습니다.

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

class Person implements User {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

6.2 type도 클래스를 제한할 수 있음

interface가 일반적으로 이 용도로 사용되지만, type도 유사한 기능을 수행할 수 있습니다.

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

class PersonType implements UserType {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

차이점:

• interface는 선언 병합 및 타입 확장이 더 자연스럽기 때문에 클래스 설계에 더 일반적으로 사용됩니다.
• type은 클래스를 제한할 수도 있지만 유니온 및 복잡한 타입 구성 정의에 더 적합합니다.

7. 상호 운용성

7.1 interface와 type은 혼합 가능

interface와 type은 실제로 혼합하여 사용할 수 있습니다. 예를 들어 interface는 type을 확장할 수 있고, 그 반대도 가능합니다.

type Name = { name: string };

interface User extends Name {
  age: number;
}

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

7.2 type은 interface를 확장할 수 있음

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

type Admin = User & {
  role: string;
};

const admin: Admin = { name: 'Bob', age: 35, role: 'Admin' };

차이점:

• interface는 type을 확장할 수 있고, type은 interface를 확장할 수 있어 유연하게 결합할 수 있습니다.

8. 복잡한 타입 표현

8.1 type은 더 큰 표현력을 제공

type은 유니온 타입, 교차 타입, 타입 별칭을 지원하므로 복잡한 타입 구성을 정의하는 데 더 유연합니다.

type ComplexType = string | number | { name: string };

const value1: ComplexType = 'Hello'; // 유효함
const value2: ComplexType = 123; // 유효함
const value3: ComplexType = { name: 'Alice' }; // 유효함

8.2 interface는 객체 구조에 더 적합

interface는 객체 구조를 설명하는 데 중점을 두며 유니온 타입이나 복잡한 타입 조합에는 덜 적합합니다.

9. 사용 사례 요약

interface를 사용해야 하는 경우:

• 객체 타입 정의, 특히 객체 지향 설계.
• implements로 클래스 제한.
• 선언 병합이 필요한 시나리오 (예: 타사 라이브러리 타입 정의).

type을 사용해야 하는 경우:

• 유니온 타입, 교차 타입 및 기타 복잡한 구성 정의.
• 기본 타입 및 튜플에 대한 별칭 생성.
• 타입 결합에 더 많은 유연성이 필요한 시나리오.

결론

interface

• 객체 타입 정의: ✅
• 기본 타입 별칭: ❌
• 선언 병합: ✅
• 확장: extends 상속
• 유니온 타입: ❌
• 교차 타입: ❌
• 클래스 구현: ✅
• 표현력: 객체 구조 정의에 적합
• 일반적인 사용 사례: 객체 지향 설계, 인터페이스를 이용한 클래스 결합

type

• 객체 타입 정의: ✅
• 기본 타입 별칭: ✅
• 선언 병합: ❌
• 확장: & 교차 타입
• 유니온 타입: ✅
• 교차 타입: ✅
• 클래스 구현: ✅ (덜 일반적임)
• 표현력: 복잡한 타입 구성에 적합
• 일반적인 사용 사례: 유니온 타입, 복잡한 타입 정의, 타입 별칭 등

전반적으로 interface는 객체 지향 프로그래밍, 특히 클래스 설계 및 상속에 더 적합합니다. 반면에 type은 더 유연하며 더 복잡한 타입 구성 및 타입 별칭과 관련된 시나리오에 이상적입니다. 대부분의 프로젝트에서 interface와 type은 상호 보완적으로 사용할 수 있습니다.

---

Node.js 프로젝트 호스팅을 위한 최고의 선택, Leapcell입니다.

Leapcell은 웹 호스팅, 비동기 작업, Redis를 위한 차세대 서버리스 플랫폼입니다:

다국어 지원

• Node.js, Python, Go 또는 Rust로 개발하십시오.

무제한 프로젝트를 무료로 배포

• 사용량에 대해서만 지불하십시오. 요청이나 요금이 없습니다.

탁월한 비용 효율성

• 유휴 요금 없이 사용량에 따라 지불합니다.
• 예: $25로 평균 응답 시간 60ms에서 694만 건의 요청을 지원합니다.

간소화된 개발자 경험

• 간편한 설정을 위한 직관적인 UI.
• 완전 자동화된 CI/CD 파이프라인 및 GitOps 통합.
• 실행 가능한 통찰력을 위한 실시간 메트릭 및 로깅.

간편한 확장성 및 고성능

• 고도의 동시성을 쉽게 처리하기 위한 자동 스케일링.
• 운영 오버헤드가 전혀 없습니다. 구축에만 집중하세요.

Documentation에서 자세히 알아보세요!

X에서 팔로우하세요: @LeapcellHQ