Interface VS Type alias 비교하기

 

 

이 글을 읽으려고 들어오신 분들은 TypeScript를 사용하여 코드를 작성하시는 분이거나,

TypeScript를 사용하기 위해 알아보기 위한 분들이실겁니다.

 

일단 저는 TypeScript 를 천천히 도입해보고 있는 개발자입니다.

 

TypeScript 를 천천히 공부하며 사용해보고 있는 와중에 저는 의문이 생겼습니다.

“Interface 그리고 Type alias 이것들은 대체 무엇이 어떻게 다른것이지?” 라는 의문 말이죠.

 

여러분은 Interface 와 Type alias 의 차이를 잘 알고 계신가요?

 

저는 대체 어떻게 무엇이 다른건지 알고 있지 못했습니다.

 

그래서 이번 글로 한번 무엇이 다른건지 정리를 해보려고 합니다.

 

잘 모르겠거나, 헷갈리는분들, 그리고 이미 알고 계시는 분들도 차근차근 보면서 같이 정리해볼까요?

 

 

---

용어설명

1. Type Alias

• 한국어로 “타입 별칭” 이라고 번역되어 사용 되어지고 있습니다.

type Name = string;

type ExplainType = {
	id: number;
	name: Name;
};

// 위처럼 사용할 수 있는 형태입니다.

2. Interface

• 객체 형태로만 정의가 가능합니다.
• 한국어로 “인터페이스” 영어를 그대로 읽어서 사용 되어지고 있습니다.

interface IExplainType {
	id: number;
	name: string;
};

// 위와 같은 형태입니다.
// 선언할때 IObject 처럼 앞에 주로 대문자 I 를 붙여서 사용합니다. (인터페이스 라는 뜻 입니다.)

 

---

무엇이 다른지 일단 나열!

 

1. Interface 는 객체 형태만 타입 설정이 가능하다.
2. Computed Property
3. 타입 프리뷰
4. 확장

 

---

Type Preview ( 타입 미리보기 )

 

Interface로 타입을 정의 한 경우에는 Type Preview 창이 나오지 않습니다.

하지만 Type Alias로 타입을 정의한 경우에는 Type Preivew 를 사용할 수 있습니다.

 

왼쪽 : Type Alias  오른쪽 : Interface      미리보기 기능 비교

 

저는 이 기능이 엄청 편하게 느껴졌습니다.

 

파일을 들어가보지 않아도 표시가 되는게 코드를 작성할때 생각보다 편하고 좋더라구요!

 

---

Index Signature 란?

type ObjectType = {
	[key: stirng]: string;
};

// 위와 같은 형식으로 object 에서 어떤 값이 들어올지 모를때 주로 사용된다.
const key = 'signature';
const targetObject: ObjectType = {
	'signature': 'Hello!',
};

console.log(targetObject[key]);

객체의 속성을 알 수 없는 상황일때만 사용하는것이 좋다고 생각합니다.

 

객체를 Index Signature 를 사용한다면 에러는 발생하지 않겠지만 존재하지 않는 키값을 참조하는 상황이 발생할 수도 있고,

해당 상황은 버그로 이어지기 쉽기 때문입니다.

 

선언이 가능한 객체에는 타입을 선언해주되,

 

타입을 선언하기 어려운경우에만 Index Signature 를 사용하는것이 좋다고 생각합니다.

 

String, Number, Symbols 타입만 가능합니다.

 

---

Computed Property

Computed Property 라고 부르는 분도 있고,

 

Computed Value , Template literal 이라고 부르는 분도 있습니다.

 

저는 이글에서는 일단 Computed Property 라고 불러보겠습니다.

 

아래와 같은 형태 입니다.

type Name = 'si' | 'bi' | 'pi';

type ObjectType = {
	[key in Name]: string;
};

Index Signature 와 비슷하게 생겼습니다.

 

저는 처음에 “Index Signature 하고 뭐가 다른거지? 다른 이름인데 똑같은 건가?” 라고 생각했었습니다.

 

근데 자세히 보니까 [key in Name] 이 부분이 달랐습니다. 들어올 key 값을 정해 놓는 형태입니다.

 

// Index Signature
type IndexSignature = {
	[key: string]: string;
};

// Computed Property
type order = 'app' | 'web' | 'appWeb';
type ComputedProperty = {
	[key in order]: string;
}

 

이렇게 쓰고 나니까 다른부분이 보였습니다!

 

Index Signature 는 interface, type alias 둘 다 사용 가능하지만,

 

Computed Property 는 type alias 에서만 사용 가능합니다!

 

---

타입 확장을 하는 방법

Interface 의 경우

interface INav {
	state: string;
};

interface ISidenav extends INav {
	isActive: boolean;
};

// 위 형태로 주로 확장을 하는데 애래처럼 똑같은 이름으로 재선언하면 자동적으로 합체시켜준다.
// 이를 선언 병합이라고 합니다.

interface INav {
	isActive: boolean;
};

// 근데 개인적으로 extends로 확장해주는게 좋다고 생각이 듭니다.

Type Alias 의 경우

type Nav = {
	state: string;
};

type Sidenav = Nav & {
	isActive: boolean;
};
// interface처럼 재선언해서 확장을 하는방식은 불가능하다.

엄밀히 말하면 Type Alias 의 경우 Interface 처럼 확장이 되는것은 아닙니다.

 

Type Alias는 확장을 하는것이 아니라, 타입을 더해서 새로운 타입을 정의하는 방식입니다.

 

위 코드로 보면 선언된 Nav 타입과 isActive 를 더해서 새로운 타입을 만들어내는 건데요.

 

공식 문서를 보면 & 를 사용해서 Type을 더해 새로운 타입을 만들어낸다면 의도치 않은 버그가 생길수 있다고 합니다.

 

Type Alias는 Interface 처럼 확장해주는 것이 아니라

Type Alias 는 모두 다 한번씩 돌면서 선언된 타입과 & 를 사용하여 정의된 타입을 더해주는것이기 때문에,

문제가 생길수도 있다고 설명이 되어있습니다.

 

성능상으로도 interface가 더 좋습니다.

 

확장 부분은 interface의 압승이네요!

 

 

---

Type Alias 의 문제점

1. 확장의 경우 Interface는 단순 객체만 들어오기 때문에 합치기만 하면 되는데, Type Alias는 순회 하면서 속성을 합쳐주기 때문에 충돌날 수 있습니다.
2. Interface 를 합칠경우 캐시가 되지만, Type 의 경우 모든 구성요소의 Type 을 체크하기 때문에 컴파일시 상대적으로 성능이 좋지 않습니다.

 

---

 

그래서 제 개인적인 생각은…

일단 공식 문서에서는 특별한 경우를 제외하고 interface 를 추천하고 있습니다.

 

근데 Type Alias 에서만 가능한것들이 존재합니다.

 

Interface는 불가능한 객체가 아닌 타입을 정의하거나,

Indexed Signature 또는 Computed Property 를 사용하는 상황일때는 Type Alias를 사용하는것도 좋다고 생각합니다.

 

 

저는 아래와 같은 방법을 사용할것 같습니다.

 

1. 팀에서 기본적으로 Interface 를 사용하여 타입을 선언한다.
2. 단일 타입을 선언하는 경우 Type Alias 를 사용한다.
3. Index Signature, Computed Property 를 사용할때는 Type Alias 를 사용한다.

 

결론적으로 중요한것은, 팀에서 약속을 정해서 사용하는것이 제일 중요하다고 생각합니다.

 

1번 개발자는 어떤 이유로 Interface 를 선호해서 사용하고,

2번 개발자는 어떤 이유로 Type Alias 를 사용하더라도,

 

1번, 2번 개발자가 같이 작업할때 어떻게 하겠다!

 

이렇게 약속을 하고 프로젝트에 동일한 방식의 타입 선언을 하는것이 제일 중요하다고 생각합니다.

 

 

 

 

 

 

참조 페이지 :

Documentation - Declaration Reference

Handbook - The TypeScript Handbook