본문 바로가기
Develope/TYPESCRIPT

[Typescript] - 타입스크립트 Type과 Interface 차이

by ccuccu 2024. 9. 16.

타입스크립트는 자바스크립트와 달리 정적 언어로, 암시적 형 변환을 지원에 대해 엄격하며 컴파일 될 때 타입 검사를 통해 경고를 표기해준다. 그렇기 때문에 변수나 함수 등에 먼저 타입을 올바르게 명시해 주는 것이 중요하다. 하지만 반복된 타입 정의는 오히려 코드 가시성이 떨어질 수 있어 이를 보완하기 위해서 변수 자체를 한개의 타입으로 만들어 사용할 수 있다.

 

1. Interface와 Type alias 특징

1. Interface

1. 객체(Object)의 타입을 정의할 때 사용한다.

2. 함수의 파라미터와 반환 타입을 정의할 수 있다.

3. extends를 이용한 상속이 가능하다.

2. Type alias

1. 특정 타입이나 인터페이스 등을 참조할 수 있는 타입 변수를 의미한다.

2. 해당 타입의 역할을 명명한다.

3. 반복되는 타입을 변수화하여 쉽게 표기할 수 있다.

4. 함수의 파라미터와 반환 타입을 정의할 수 있다.

 

2. Interface와 Type alias 차이점

1. 활용 시 타입 표기 방식의 차이가 있다.

Interface와 Type alias의 선언 방식은 유사하게 가능하나, 반환되는 타입이 다르게 표기된다. Type alias는 종류(number, string, object 등)가 타입으로 반환되어 나타나지만, Interface는 타입이 인터페이스 작성 시 정한 이름으로 표기된다.

쉽게 말해,

Interface 이름 {
	id: string;
    pw: number;
}
let User: 이름

Interface의 User는 타입이 이름이 되며,

Type 이름 = {
	id: string;
    pw: number;
}
let User: 이름

Type alias의 User의 타입은 id: string, pw: number가 된다.

 

2. 정의 시 사용되는 변수의 타입의 한계

Interface는 객체 타입을 정의할 때 사용하지만, Type alias는 원시 타입, 유니언( | ), 인터섹션( & )에서도 사용할 수 있다.

또한 타입 별칭을 사용하면 제너릭<> 등의 타입에도 사용할 수 있다.

 

3.  타입 확장의 차이

Interface는 extend를 이용하여 상속의 개념으로 확장할 수 있지만, Type alias는 &를 이용한 인터섹션으로 + 개념으로 확장할 수 있다.

또한 Interface는 선언 병합이라는 성질이 있어 재선언시 오류가 나는 Type alias와 달리 interface에서는 오류가 나지 않고 서로 합쳐진다.

interface user {
	id: string;
    pw: number;
}

interface user {
	age: number
}

interface를 위처럼 선언한다면,

interface user {
	id: string;
    pw: number;
    age: number
}

처럼 활용할 수 있게 된다.

 

3. Interface와 Type alias 의 적절한 사용 시기

타입 별칭은 = {}로 쓰고, 인터페이스는 {}로 쓰는 만큼 Interface와 Type은 서로 비슷하지만 다른 차이점을 가지고 있다.

비슷한 기능인 만큼 개발자의 적절한 사용이 중요한데, 개인적으로는 Interface는 객체를 선언할 때 주로 사용하고, Type alias는 변하지 않을 타입에 대하여 선언할 때, 복잡한 타입에 대해 다룰 때 주로 사용하면 좋을 것 같다.

 

 

 

 

 

출처: 쉽게 시작하는 타입스크립트 - 장기효 저