타입 별칭 vs 인터페이스

모임에서 10~15분 강의

타입 별칭 vs 인터페이스

둘 다 객체 타입을 정의할 수 있다는 관점에서 차이점은 모호하다. 하지만 여러 다른 관점에서는 차이점이 명확하므로 두 방법을 올바른 곳에 사용해야 한다.

 

# 인터페이스(Interface)

주로 객체의 타입을 선언할 쓰인다. 대문자로 시작해야 한다. 또한, 인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값으로 가지도록 강제된다. 더 읽기 쉬운 오류 메시지, 더 빠른 컴파일러 성능, 클래스와의 더 나은 상호 운용성을 위해 선호된다.

• 객체의 속성과 속성 타입
• 함수의 파라미터와 반환 타입
• 함수의 스펙(파라미터 개수와 반환값 여부 등)
• 배열과 객체를 접근하는 방식
• 클래스

optional

interface Developer {
  part: 'FE' | 'BE' | 'PM';
  nickname: string;
  age?: number;
}

let sprint: Developer = {
  part: 'FE',
  nickname: 수료생
  age: 31
}

 

readonly

interface Developer {
  readonly part: 'FE' | 'BE' | 'PM';
  nickname: string;
  age?: number;
}

let person: Develop = {
  part: 'FE',
  nickname: '수료생',
  age: 31,
};

person.part = 'BE' // readonly 속성이므로 할당만 가능하고 변경할 수 없다.

 

index sigature

interface Developer {
  part: 'FE' | 'BE' | 'PM';
  nickname: string;
  age?: number;
  
  [key: string]: string;
}

let person: Developer = {
  part: 'FE',
  nickname: '수료생',
  4기: '우수생',
  5기: '우수생',
  6기: '우수생',
  10기: '모집중',
}

 

함수

interface Add {
  (num1: number, num2: number): number;
}

const add: Add = function(x, y) {
  return x + y;
}

add(10, 20); // 30

interface IsAdult {
  (age: number): boolean;
}

const a:IsAdult = (age) => {
  return age > 19;
}

a(32); // true
a(18); // false

 

implements

interface Car {
  color: string;
  wheels: number;
  start(): void;
}

class Bus implements Car {
  color;
  wheels = 4;
  constructor(c: string) {
    this.color = c;
  }
  start() {
    console.log('go...');
  }
}

const 143 = new Bus('blue'); // Bus: {'wheels': 4, color: 'green'}

 

선언 병합

사용을 지양하는 것이 좋다.

interface Developer {
  part: 'FE' | 'BE' | 'PM';
  nickname: string;
}

interface Developer {
  age?: number;
}

 

상속(extends)

객체 관 관계를 형성하는 방법이며, 상위 클래스의 내용을 하위 클래스가 물려받아 사용하거나 확장하는 기법을 말한다.

interface Car {
  color: string;
  wheels: number;
  start(): void;
}

interface Toy {
  name: string;
}

interface ToyCar extends Car, Toy {
  price: number;
}

---

# 타입 별칭

반복되는 타입의 조합을 변수화시켜 재사용하는 것을 의미한다. 타입에 변수명을 부여한 것으로 이해하면 된다. 그로 인해, 가독성이 향상된다.

type Combine = string | number;

---

# 인터페이스와 타입 별칭의 차이점

둘 다 객체 타입을 정의할 수 있으나 확장 가능성에는 차이가 있다.

interface User {
  id: string;
  name: string;
}

type User = {
  id: string;
  name: string
}

확장 가능성

• 인터페이스 : 선언병합이나 상속
• 타입 별칭 : 인터섹션

이름 중복

• 인터페이스 : 이름이 중복되면 선언병합을 통해 확장된다.
• 타입 별칭 : 오류가 발생한다.

type Window = {
  title: string;
}

type Window = {
  ts: TypeScriptAPI;
}

타입의 차이

• 인터페이스 : 주로 객체 타입을 정의할 때 사용
• 타입 별칭 : 중복된 타입 코드를 줄이고 주요 데이터 타입이나 인터섹션 타입, 유니언 타입 등을 정의할 때 사용

 

---

참고 자료

쉽게 시작하는 타입스크립트

https://velog.io/@chaevivi/TS-Interface%EC%99%80-type%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90#3-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4%EC%99%80-%ED%83%80%EC%9E%85-%EB%B3%84%EC%B9%AD%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90