[Typescript] 타입스크립트에서 interface와 type의 차이점

개요

최근 이직한 회사에서는 모든 타입 정의 코드에서 type을 사용하고 있었다.

항상 interface만 써오던 나로서는 type과 interface의 차이점이 궁금했다.

Interface

interface는 객체의 형태를 정의하는 데 사용된다.

예를 들어, 사용자 객체를 정의한다고 할 때, interface를 사용하여 이렇게 작성할 수 있다

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

특징

1. 확장

interface는 extends 키워드를 사용하여 다른 인터페이스를 확장할 수 있다.

이를 통해 코드의 재사용성을 높일 수 있다.

interface Admin extends User {
  adminSince: Date;
}

2. 병합

동일한 이름의 인터페이스가 여러 개 정의되면, 타입스크립트는 이를 자동으로 병합한다.

이는 라이브러리 작성 시 유용하다.

interface User {
  isAdmin: boolean;
}

const user: User = {
  name: 'Alice',
  age: 30,
  isAdmin: true
};

반응형

Type

type은 타입 별칭을 정의하는 데 사용된다.

다음과 같이 사용할 수 있다

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

특징

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

type은 유니온 타입과 교차 타입을 정의할 수 있다.

이를 통해 다양한 타입을 유연하게 정의할 수 있다.

type Admin = User & {
  adminSince: Date;
};

type UserRole = 'admin' | 'user' | 'guest';

2. 병합 불가능

동일한 이름의 type을 여러 번 정의하면 오류가 발생한다.

따라서 type은 이름 충돌을 방지하는 데 더 안전할 수 있다.

공통점

interface와 type은 둘 다 객체의 구조를 정의하는 데 사용되며, 함수 타입과 제네릭도 지원한다.

interface FunctionType {
  (x: number, y: number): number;
}

type FunctionTypeAlias = (x: number, y: number) => number;

언제 무엇을 사용할까?

객체의 형태를 정의할 때

확장이 필요하거나 객체의 구조를 표현할 때는 interface를 사용하는 것이 좋다.

다양한 타입을 정의할 때

유니온 타입, 교차 타입, 튜플 등을 정의할 때는 type을 사용하는 것이 좋다.

회사나 팀의 스타일 가이드에 따라 interface와 type 중 하나를 선택하여 사용하는 것이 일반적이다.

중요한 것은 일관된 스타일을 유지하는 것이다. (회사에서 type만 쓰는 중)

타입스크립트를 사용하면서 interface와 type을 적절히 활용하면,

더 안정적이고 유지보수하기 쉬운 코드를 작성할 수 있다.

오늘의 내용이 타입스크립트 사용에 도움이 되길 바란다.