[TIL] 내일배움캠프 1.17

오늘은 TypeScript 에서 Type 과 Interface의 차이점이 궁금해서 공부해보았다.

❓ 의문의 시작

Intersection Type (교차타입)을 공부하면서 궁금한 점이 생겼다.

type Common = {
	name: string,
  	age: number,
  	gender: string,
}

Common 이라는 타입이 있고,

type Animal = {
	howl: string
}

Animal 이라는 타입이 있을 때,

type Cat = Common & Animal

위와 같이 정의하면, Cat이라는 타입은 Common 타입과 Animal 을 결합해서 사용하는 것 이라고 공부하였다.

Cat 타입으로 정의한 객체에서는, Common 타입의 속성과 Animal 타입의 속성을 다 사용할 수 있다.

그런데,

이런 모양을 어디서 많이 본 것 같았다.

바로 Interface 의 상속이었다.

interface Common {
	name: string,
  	age: number,
  	gender: string,
}

interface Animal {
	howl: string
}

interface Cat extends Common, Animal {
	...
}

이렇게 하면 같은 동작을 하지않을까? 라고 생각했었다.

❗ 결론

1. 기능 상으로는 차이가 없다!!!

위와 같이 비슷한 동작을 하는 것이 하나 더 있었다.

• 리터럴 타입

type Easing = "ease-in" | "ease-out"

• 열거 타입

enum Easing { "ease-in", "ease-out" }

2. 차이점

https://bny9164.tistory.com/48

• type은 새로운 속성을 추가하기 위해 같은 이름으로 선언할 수 없다.
• interface는 같은 이름으로 선언하여 확장이 가능하다.

interface Common {
	name: string
}
interface Common {
	age: number
}
const human: Common {
	name: "asher",
    age: 28,
}

// error:  _Common 중복 선언
type _Common {
	name: string
}
type _Common {
	age: number
}