타입스크립트 Type 과 Interface의 공통점과 차이점

 

 

Type vs Interface

 

타입스크립트에서는 값의 모양이나 구조를 정의하기 위해 type 과 interface 모두 사용되지만 , 둘은 약간의 차이가 있습니다

 

- 공통점

 

• type과 interface 모두 타입스크립트에서 객체의 타입, 함수의 타입 등을 정의할 수 있습니다

 

• 변수 타입 , 함수의 반환값을 지정하는 데 둘 다 사용할 수 있습니다

 

• type과 interface 모두 확장하여 새 유형을 만들 수 있습니다

 

 

- 차이점

• type은 기존 타입의 새 이름을 정의하는 방법이며, interface는 새로운 객체를 처음부터 정의합니다. 즉 type은 타입의 타입 별칭(Type Alias)을 지정하는데 사용할 수 있고 interface는 완전히 새로운 유형을 정의하는 데 사용할 수 있습니다

 

• type은 선언된 타입을 재 선언시 오류가 나며 , interface는 재 선언시 기존의 interface의 객체에 더하여 확장된다.

 

• 타입 확장 하는 방식을 & (type) 과 extends (interface) 와 같이 다르게 사용한다.

 

• type은 유니온(Union) 타입 및 인터섹션(intersection) 타입을 만드는 데 사용할 수 있지만, interface는 오직 객체 유형을 만드는데만 사용할 수 있습니다

 

• type은 함수 매개 변수 등 반환 타입을 포함하여 interface 보다 더 많은 곳에서 사용할 수 있습니다

 

 

Type

 

// type 만드는 방법

type Drink = "커피" | "콜라";

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

type Developer = {
  name: string;
  skill: string;
}

type Wus = Person & Developer // 인터섹션 타입(Intersection Type) 두 개를 모두 만족시키는 하나의 타입

type Food = "짜장면" | "김치찌개"; // 유니온 타입(Union Type) 'A' 이거나 'B' 를 만족시키는 타입



// type에서의 확장 방식

type Champion = {
	health:number
    damage:number
}

type Teemo = Champion & {
  name:"티모" | "Teemo";
}

// type에서의 재선언시 에러

type Ezreal = {
  health:number
};

type Ezreal = { //error : 식별자가 중복됨
  damage:number
};

 

Interface

// interface 만드는 방법

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

// interface에서의 확장 방식

interface Champion = {
	health:number
    damage:number
}

interface Teemo extends Champion {
   name:"티모" | "Teemo";
}


// interface 재선언시 확장됨

interface Ezreal = {
  health:number
};

interface Ezreal = { 
  damage:number
};

const champion : Ezreal = {
  health:1136,
  damage: 96,
};

 

 

그렇다면 언제 Type을 사용해야하고 Interface를 사용해야 할까요?

 

Interface

1. 클래스에서의 객체 유형을 확장하거나 구현해야 하는 경우

2. 함수의 매개 변수 및 반환 유형을 설명해야 하는 경우

3. 클래스의 공용 API를 설명해야 하는 경우

 

 

Type

 

1. 유니온, 인터섹션 타입 및 조건부 타입과 같은 사용자 정의 유형

2. 별칭을 사용하여 코드를 더 쉽게 읽을 수 있게 하거나 이해하기 쉽게 만드는 경우

 

 

전체적으로 객체 유형과 기능을 정의하기 위해 interface를 사용하고, 사용자 지정 또는 복잡한 유형을 정의하기 위해 type을 사용합니다. 그러나 interface를 사용할지 type을 사용할지 선택하는 것은 최종적으로 특정 사용 사례와 개발자 또는 팀의 선호도에 달려 있습니다.

 

 

공부를 하고 난 이후 저만의 규칙

 

1. 기본적으로 인터페이스를 사용한다

 

2. 유니온 혹은 인터섹션 혹은 복잡한 타입의 경우 코드를 더 읽기 쉽도록 하기 위해 type으로 지정한 이후 인터페이스에서 사용한다.