[TIL] Day 51 TypeScript에서 Interface와 Type의 차이

2023.12.14 목

 

TypeScript를 배우면서 타입을 정의할 때 사용하는 type과 interface 두가지 방법에 대한  의문점이 들었다.

누구는 type을, 누구는 interface를 쓰라고 한다. 무슨 기준으로 정해야하는지 궁금했다.

어떤 상황에서 어떤 기능을 활용해야 더 효율적인 코딩 작업을 할 수 있는지 알아보자.

 

 

Interface

1. 목적

- Interface는 주로 객체의 형태(shape)를 정의하기 위해 사용된다.
- 코드의 가독성을 높이고 유지보수성을 개선하는 데 중점을 둔다.

2. 확장 가능성
- Interface는 선언된 이름을 가지고 확장이 가능하다.
- 같은 이름의 여러 Interface를 병합(merge)하여 사용할 수 있다.

3. 선언 방법

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

const user: Person = {
  name: 'John',
  age: 25,
};

 

4. Interface를 사용해야 하는 경우

 

• 선언 병합(자동 병합)의 이점을 활용해야 하는 경우
• 객체 타입을 정의하거나, 타입을 사용할 필요가 없을 경우

 

 

Type

1. 목적
- Type은 객체뿐만 아니라 원시 타입, 유니온 타입, 튜플 등 다양한 형태의 타입을 정의할 수 있다.
- 복잡한 타입을 표현하고 재사용 가능한 타입을 생성하는 데 중점을 둔다.

2. 확장 가능성
- Type도 선언된 이름을 가지고 확장이 가능하지만, 같은 이름의 여러 Type을 병합하는 것은 불가능하다.

3. 선언 방법

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

const user: Person = {
  name: 'John',
  age: 25,
};

 

4. Type을 사용해야 하는 경우

 

• 원시 타입을 정의할 경우
• 튜플 타입을 정의할 경우
• 함수 타입을 정의할 경우
• 유니온 타입을 정의할 경우
• 매핑된 타입을 정의할 경우

 

 

공통점

1. 상호 대체 가능성
- 대부분의 경우 두 방식은 상호 대체 가능하며, 둘 다 객체의 형태를 정의하고 타입을 사용할 수 있다.

2. 제네릭 사용
- Interface와 Type 모두 제네릭(Generic)을 사용하여 유연한 타입 정의가 가능하다.

 

 

선택 기준

1. 코드 베이스

- 이미 Interface를 사용하고 있는 코드 베이스에서는 Interface를 계속 사용하는 것이 일관성을 유지할 수 있습니다.
- 새로운 프로젝트나 코드 베이스에서는 Type을 사용하여 보다 유연하게 타입을 정의할 수 있습니다.

2. 확장성
- Interface의 확장 가능성이 중요하다면 Interface를 선택합니다.
- Type의 간결함과 유연성이 더 필요하다면 Type을 선택합니다.

3. 타입 별칭
- 타입 별칭(Type alias)은 재사용 가능한 타입을 만들 때 주로 Type을 사용합니다.
- 타입 별칭은 이미 존재하는 타입에 다른 이름을 붙일 때 주로 사용됩니다.

 

 

결론

Interface와 Type은 TypeScript에서 타입 정의를 위한 강력한 도구이다.

Type은 Interface 의 거의 모든 기능을 커버한다.

그러나 Interface 는 항상 확장 가능하고, Type은 그렇지 않다.

그러므로 경우에 따라서 선택하여 사용해야 하며, 가장 중요한 것은 일관된 기준에 따라 선택해야 한다는 것이다.

프로젝트의 특성과 코드 스타일에 따라 선택할 수 있으며, 두 방식을 적절히 혼용하여 사용하는 것도 가능하다.

 

 

 

https://yceffort.kr/2021/03/typescript-interface-vs-type

타입스크립트 type과 interface의 공통점과 차이점

 

https://ykss.netlify.app/typescript/type_vs_interface/

[Typescript] 타입(Type)과 인터페이스(Interface)의 차이점

 

https://velog.io/@wlwl99/TypeScript-type%EA%B3%BC-interface%EC%9D%98-%EC%B0%A8%EC%9D%B4

TypeScript - type과 interface의 차이

 

 

---

하루를 마치며

이제 TypeScript까지 배우게 됐다.새로운 스타일의 언어이며, 현업에서도 많이 활용되고 있는 주력 언어라는 이야기를 듣고 꼭 배워보고 싶었다.그동안 동적인 JavaScript에 익숙해져서 그런지 TypeScript를 적응하는데는 어려움이 있었다.타입을 하나 하나 정확하게 기입해줘야 작동을 하며, 조금만 엉뚱한 코드를 작성하면 바로 오류를 뱉어낸다.처음에는 어렵게만 느껴지겠지만, 추후 프로젝트의 크기가 커졌을 때 이렇게 바로바로 오류를 알려주는 것은 정말 고마운 일이 될 것이다.

TypeScript의 안정성을 믿고 코딩에만 집중할 수 있을 것이다.

 

 

 

 

오늘의 한 줄
TypeScript는 꼼꼼한 성격