TypeScript의 Interface와 Type 차이점 이해하기: 뭘 써야할까?

작성일 : 2024-06-01

TypeScript의 Interface와 Type 차이점 이해하기

TypeScript는 JavaScript에 정적 타입을 추가한 프로그래밍 언어로, 타입 안전성을 제공하여 개발자의 생산성을 높이고 코드 품질을 개선합니다. TypeScript에는 타입을 정의하는 두 가지 주요 방법이 있습니다: interface와 type. 이 글에서는 interface와 type의 차이점을 살펴보고, 각각의 사용 사례와 장단점을 이해해 보겠습니다.

Interface

Interface란?

interface는 객체의 구조를 정의하는 데 사용되는 TypeScript의 구문입니다. interface는 객체가 따라야 할 계약(contract)을 정의하며, 객체의 속성 및 그 속성의 타입을 설명합니다.

예제


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

const user: User = {
  name: "John Doe",
  age: 30,
};

위의 예제에서 User 인터페이스는 name과 age 속성을 가지며, 각각 string과 number 타입을 가집니다. user 객체는 User 인터페이스를 준수합니다.

확장

인터페이스는 확장(extend)이 가능하여, 기존 인터페이스를 기반으로 새로운 인터페이스를 만들 수 있습니다.


typescript
interface Person {
  name: string;
}

interface Employee extends Person {
  employeeId: number;
}

const employee: Employee = {
  name: "Jane Smith",
  employeeId: 1234,
};

위의 예제에서 Employee 인터페이스는 Person 인터페이스를 확장하여 employeeId 속성을 추가합니다.

Type

Type이란?

type은 TypeScript에서 사용할 수 있는 또 다른 타입 정의 구문입니다. type 키워드는 다양한 타입을 정의할 수 있으며, 객체 타입뿐만 아니라 기본 타입, 유니언 타입, 튜플 등을 정의할 수 있습니다.

예제


typescript
type User = {
  name: string;
  age: number;
};

const user: User = {
  name: "John Doe",
  age: 30,
};

위의 예제에서 type을 사용하여 User 타입을 정의하였고, 이는 인터페이스를 사용한 예제와 동일한 구조를 가집니다.

유니언 타입

type은 유니언 타입을 정의하는 데 유용합니다. 유니언 타입은 여러 타입 중 하나를 가질 수 있는 타입을 정의합니다.


typescript
type Status = "success" | "error" | "loading";

let currentStatus: Status = "success";
currentStatus = "error"; // 유효한 값
// currentStatus = "unknown";  // 오류: "unknown"은 Status 타입에 할당할 수 없습니다.

위의 예제에서 Status 타입은 세 개의 문자열 리터럴 타입 중 하나를 가질 수 있습니다.

인터섹션 타입

type은 인터섹션 타입을 정의하는 데에도 사용됩니다. 인터섹션 타입은 여러 타입을 결합하여 새로운 타입을 생성합니다.


typescript
type Person = {
  name: string;
};

type Employee = {
  employeeId: number;
};

type EmployeeDetails = Person & Employee;

const employee: EmployeeDetails = {
  name: "Jane Smith",
  employeeId: 1234,
};

위의 예제에서 EmployeeDetails 타입은 Person 타입과 Employee 타입을 결합하여 정의되었습니다.

Interface와 Type의 차이점

기능적 차이

확장성:
- interface는 확장(extend)이 가능하여, 다른 인터페이스를 상속받거나 여러 인터페이스를 결합할 수 있습니다.
- type은 인터섹션(&)을 통해 여러 타입을 결합할 수 있지만, 인터페이스처럼 확장할 수는 없습니다.
병합(Merging):
- 동일한 이름의 interface를 여러 번 선언하면 TypeScript는 이를 자동으로 병합합니다.
- type은 동일한 이름으로 여러 번 선언할 수 없으며, 병합되지 않습니다.


typescript
interface User {
  name: string;
}

interface User {
  age: number;
}

const user: User = {
  name: "John Doe",
  age: 30,
};

// type User = { name: string; };
// type User = { age: number; }; // 오류: 중복된 식별자

사용 사례

객체의 구조 정의:
- 객체의 구조를 정의할 때는 interface를 사용하는 것이 일반적입니다. 이는 인터페이스의 확장성과 병합 기능 덕분입니다.
유니언 타입과 인터섹션 타입:
- 유니언 타입이나 인터섹션 타입을 정의할 때는 type을 사용하는 것이 더 적합합니다.
기본 타입 조합:
- type은 기본 타입의 조합을 정의하는 데 유용합니다. 예를 들어, 특정 문자열 리터럴 타입을 정의하거나 튜플 타입을 정의할 때 사용합니다.

결론

TypeScript에서 interface와 type은 모두 타입을 정의하는 강력한 도구입니다. 각기 다른 기능과 장단점을 가지고 있으며, 사용 사례에 따라 적절히 선택하여 사용할 수 있습니다. 객체의 구조를 정의하고 확장성과 병합 기능이 필요할 때는 interface를, 유니언 타입이나 인터섹션 타입을 정의하거나 기본 타입의 조합이 필요할 때는 type을 사용하는 것이 좋습니다. 이를 통해 더욱 안전하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.