Typescript - Interfaces (Typescript에서 Object의 모양을 알려주는 방법 / 상속받기_extends)

✅ Typescript에서 Object의 모양을 알려주는 방법

< 첫 번째 방법 >

:  type 키워드를 사용하여 오브젝트의 모양을 알려주는 방법

 

< 두 번째 방법 >

: interface 키워드를 사용하여 오브젝트의 모양을 알려주는 방법

 

	공통점	차이점
Type	오브젝트의 모양을 결정하는 역할이다.	type 키워드는 interface 키워드에 비해 좀 더 활용할 수 있는게 많다.
Interface		interface는 오브젝트의 모양을 특정한다는 오직 한가지 용도만 가지고 있다.

< 첫번째 방법 > : Type

type Team = 'red'| 'blue' |'yellow'
type Health = 1 | 5 | 10

type Player = {
    nickname: string,
    team: Team,
    health: Health
}

const lala: Player = {
    nickname: 'lala',
    team: 'yellow',
    health: 10
}

---

< 두번째 방법 >: interface

type Team = 'red'| 'blue' |'yellow'
type Health = 1 | 5 | 10

interface Player {
    nickname: string,
    team: Team,
    health: Health
}

const lala: Player = {
    nickname: 'lala',
    team: 'yellow',
    health: 10
}

 

---

✅ 상속받기 

< Interface 키워드로 상속 받는 방법 >

:  extends

interface User {
    name:string
}

// Player interface를 만들 때, 
// User를 상속 받는 방법으로 코드를 작성할 수 있다. (name:string을 재 작성하지 않고!)
interface Player extends User {}

const lala : Player = {
    name: 'lala'
}

---

< Type 키워드로 상속 받는 방법 >

:  & 연산자

type User = {
    name:string
}
// & 연산자를 사용한다.
type Player = User & {}

const lala : Player = {
    name: 'lala'
}