Interface

1. 타입을 쓰는 방법

• 기본 타입

type Food = string;

const kimchi: Food = "good"

• object의 모양을 알려주는 타입

type Player = {
    nickName: string,
    healthBar: number
}

const nico: Player = {
    nickName: "nico",
    healthBar: 10
}

• type alias 사용

type NickName = string
type Health = number

type Player = {
    nickName: NickName,
    healthBar: Health
}

• 지정된 옵션으로만 타입 제한
  concrete 타입의 특정 값을 제한할 수 있다.
  이런 타입을 사용할 때는 주어진 선택지에 있는 것만 사용이 가능하다.

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

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

const nico: Player = {
    nickName: "nico",
    team: "red",
    health: 5
}

선택지에 없는 값을 사용하면 오류가 발생한다.

2. Interface

interface는 오브젝트 모양을 설명(특정)하는 또 다른 방법이다.
보통 react를 이용해 작업을 할 때 많이 사용하며 문법 구조가 객체 지향 프로그래밍과 매우 유사하다.

차이점?

interfacesms 오로지 오브젝트만을 설명할 수 있지만, type 키워드를 사용하는 것은 오브젝트, 특정 값 제한, 타입 alias 등이 가능하다.

또한, interface는 객체 지향 프로그래밍의 개념을 활용해서 디자인되었고, type은 더욱 유연하고 개방적이다.

(1) Interface vs Type

• Interface 사용

interface User {
    name: string
    // readonly name: string
}

interface Player extends User {

}

const nico : Player = {
    name: "nico"
}

필요에 따라 readonly를 사용할 수 있다.

• Type 사용

type User = {
    name: string
}

type Player = User & {

}

const nico : Player = {
    name: "nico"
}

(2) Interface의 프로퍼티 축적

interface의 프로퍼티 축적이란 interface를 각각 만들어도 타입스크립트가 알아서 하나로 합쳐주는 것이다. 이는 type에서는 할 수 없는 기능이다.

interface User {
    name: string
}

interface User {
    lastName: string
}

interface User {
    health: number
}

const nico: User = {
    name: "nico",
    lastName: "le",
    health: 10
}

3. implements

implements(interface)는 컴파일 했을 때 js로 바뀌지 않고 사라진다.
추상 클래스와 같은 역할을 수행하지만 interface는 더 가볍게 처리할 수 있다는 것이다.
implements를 사용할 때, class가 특정 형태를 따르도록 어떻게 강제할까?

interface User {
    firstName: string,
    lastName: string,
    sayHi(name:string):string,
    fullName():string
}

class Player implements User {
    constructor(
        public firstName: string,
        public lastName: string
    ) {}
    fullName(){
        return `${this.firstName} ${this.lastName}`
    }
    sayHi(name: string){
        return `Hello ${name}`
    }
}

만약 추상 클래스를 다른 클래스들이 특정 모양을 따르도록 하기 위한 용도로 쓴다면 같은 역할을 하는 interface를 쓰는 것이 더 좋다.

4. Interface VS Type

interface와 type은 사용하였을 때의 코드만 보면 어떤 것이 interface고 어떤 것이 type인지 알 수 없다.

type PlayerA = {
    name: string
}

interface PlayerB {
    name: string
}

const playerA: PlayerA = {
    name: "dongdu"
}

const playerB: PlayerB = {
    name: "dongdu"
}

그렇다면, interface와 type은 어떤 차이가 있는것일까?

1) 상속의 차이

type PlayerA = {
    name: string
}

type PlayerAA = PlayerA & {
    lastName: string
}

interface PlayerB {
    name: string
}

interface PlayerBB extends PlayerB {
    lastName: string
}

const playerA: PlayerAA = {
    name: "dongdu",
    lastName: "lee"
}

const playerB: PlayerBB = {
    name: "dongdu",
    lastName: "lee"
}

둘의 결과는 같지만 상속하는 과정의 차이가 있다.
interface의 경우 객체지향과 비슷한 모양의 띈다.

2) property 추가

나중에 프로퍼티를 추가하고 싶은 경우에는 어떻게 해야 할까?
type에 경우 중복되게 작성을 할 수 없지만 interface는 알아서 합쳐주기 때문에 중복되게 작성이 가능하다.

type PlayerA = {
    name: string
}

type PlayerAA = PlayerA & {
    lastName: string
}

// type PlayerAA = {
//    health: number    
//} 오류

interface PlayerB {
    name: string
}

interface PlayerBB extends PlayerB {
    lastName: string
}

interface PlayerBB {
    health: number
} // 가능