TS - 타입선언 : type과 interface의 차이점 알아보기

typescript

 

타입스크립트는 변수, 함수 등에 타입을 명시하여 실수를 줄이고 코드의 안정성을 높일 수 있습니다.

 

타입스크립트에서 타입을 정의하는 방법으로는 interface와 type이 있는데
대체 둘은 어떤 차이를 가지고 있고 또 어떻게 사용하는지 알아보겠습니다.

Type

Type은 타입 별칭(type alias) 또는 타입 지정자(type specifier)로 불리는데,

이미 존재하는 타입에 다른 이름을 붙여서 사용할 수 있으며
기본 타입, 유니온 타입, 튜플등의 다양한 타입을 정의 할수 있습니다. 

type UserID = number;
type UserName = string;
type User = {
  id: UserID;
  name: UserName;
  isAdmin: boolean;
};

type Status = "pending" | "approved" | "rejected";

type Coordinates = [number, number];

 

Interface

Interface는 타입스크립트 만의 고유한 개념인데,

주로 객체의 구조를 정의하는데 사용합니다.

interface User {
  id: number;
  name: string;
  isAdmin: boolean;
}

 

 

 

차이점

interface는 선언 병합이 가능하지만 type은 선언 병합이 불가능 합니다. 
선언 병합시엔 같은 이름의 interface를 여러번 선언하면 자동으로 병합이 이루어집니다.

interface User {
	name: string;
}

interface User {
	age: number;
}

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

type user = {
	name: string;
}

//type User = {age: number;} 을 선언하게 되면 식별자가 중복되어 에러가 납니다.

 

type은 유니온, 인터섹션 타입을 쉽게 만들수 있습니다. 

반면 interface는 유니온 타입을 직접 만들순 없지만 extends를 사용하면 인터섹션과 유사하게 구현 정의 할수 있습니다.

 

type Admin = { name: string; privileges: string[] };
type Employee = { name: string; startDate: Date };
type ElevatedEmployee = Admin & Employee;

type StringOrNumber = string | number;

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

 

 

정리

일반적으로 객체의 구조를 정의하는 경우엔 interface를 사용하고,
복잡한 타입이나 유니온 튜플등의 타입을 정의할때는 type을 사용하는것이 관행이라고 합니다.

하지만 대부분의 경우엔 둘다 사용이 가능하니 프로젝트 컨벤션에 따라서 선택하여 사용해도 될것같습니다. 

 

- 참고자료
https://takd.tistory.com/entry/TypeScript-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C-type%EA%B3%BC-interface%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90