TS. Interfaces

Interfaces

• 인터페이스는 익숙한 타입과 비슷하지만, 두 가지 부분에서 다른 점을 이해해야 한다.
• 인터페이스는 object의 모양을 알려주는데 사용할 수 있다.
• 인터페이스는 또한 property를 축적하는데 사용할 수 있다.
• 인터페이스는 클래스의 모양을 알려주고, 자바스크립트 코드로 컴파일되지 않는다는 점에서 유용하다.

---

Type의 기능

• type이 타입스크립트에서 얼마나 유용한지를 알아야 한다.
• Player라는 타입 안에 닉네임과 체력에 대해 다른 타입을 부여할 수 있다.
• 또한 Player라는 타입으로 똑같은 의미로 사용되는 변수 여러 개를 만들 수 있다.
• object의 모양을 알려주는데 사용할 수 있다.

type Player = {
    nickname: string,
    healthBar: number
}
const imae: Player = {
    nickname: "imae",
    healthBar: 100
}

• 또 다른 방법은 Food가 string이어야 한다고 선언할 수 있다.
• 타입이 string이라고 알려주는데 사용할 수도 있다.

type Food = string;

const kimchi:Food = "delicious"

• 타입 alias (대체명)를 쓸 수도 있다.

type Nickname = string
type Health = number
type Friends = Array<string>

• Team에만 있는 색을 사용할 수 있고, Health에 있는 숫자만 사용할 수 있다.

type Team = "red" | "blue" | "yellow" // alias
type Health = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100

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

const imae: Player = {
    nickname: "imae",
    team: "red",
    health: 100
}

---

Interface로 type을 대체

• type은 위에서 살펴본 것과 같이 다양한 용도가 있다.
• 하지만 Interface는 object의 모양을 특정해주는 역할만 존재한다.
• object의 모양을 특정하는 방법이 우리에게 2개가 생긴 것이다. type을 사용하거나 Interface를 사용할 수 있다.
• 하지만 type 키워드가 interface 키워드에 비해 사용할 수 있는 용도는 훨씬 더 많다.

type Team = "red" | "blue" | "yellow"
type Health = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100

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

const imae: Player = {
    nickname: "imae",
    team: "red",
    health: 100
}

• 아래와 위의 용도가 같다고 볼 수 있다.
• 하지만, 필자는 object의 모양을 특정해주는 역할이라는 것을 강조하는 의미에서 interface를 사용할 것이다.

type imae = {

}
==
interface imae {

}

---

Interface 상속

• interface class1 extends class2
• class class1 extends class2와 구문이 비슷하다.
• extends 키워드는 클래스를 다른 클래스의 자식으로 만들기 위해 class 선언 또는 class 식에 사용된다.

interface User {
    name: string
}

interface Player extends User {

}

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

• 똑같은 기능을 가지고 있는 코드를 type의 형태로 바꾸면 아래와 같다.
• &는 and를 의미한다.
• |는 or을 의미한다.

type User = {
    name: string
}

type Player = User & {

}

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

---

Interface property 축적

• 아래 코드와 같은 방법으로 User class를 확장시킬 수 있다.

interface User {
    name: string
}
interface User {
    lastName: string
}
interface User {
    health: number
}

const imae: User = {
    name: "imae",
    lastName: "kwak",
    health: 23
}

• type 키워드는 이와 같은 interface의 기능을 사용할 수 없다.

type User {
    name: string
}
type User {
    lastName: string
}
type User {
    health: number
}

const imae: User = {
    name: "imae",
    lastName: "kwak",
    health: 23
}

---

추상화를 원할 때 Class와 Interface를 사용할 때 차이점

• 추상 클래스는 유용한데, 다른 클래스가 가져야 할 property랑 메소드를 명시할 수 있도록 도와준다.
• 추상 클래스는 그것으로부터 인스턴스를 만드는 걸 허용하지 않는다.
• 즉, new User를 사용할 수 없다.
• 상속받는 클래스가 어떻게 동작해야할 지 알려주기 위해서 추상클래스를 사용한다.
• 추상클래스의 문제점은 자바스크립트에는 abstract의 개념이 없다는 것이다.
• 일반적인 class라고 인식한다.
• 인터페이스는 컴파일하면 JS로 바뀌지 않고 사라진다.
• 인터페이스를 쓸 때 클래스가 특정 형태를 따르도록 어떻게 강제할 수 있을지 생각해보아야 한다. 

추상 클래스를 사용한 코드

abstract class User {
    constructor(
        protected firstName: string,
        protected lastName: string
    ) {}
    abstract sayHi(name:string):string
    abstract fullName():string
}
class Player extends User {
    fullName(){
        return `${this.firstName} ${this.lastName}`
    }
    sayHi(name:string){
        return `Hello ${name}. My name is ${this.fullName}`
    }
}

인터페이스를 사용한 코드

• extends 키워드는 자바스크립트에도 존재하지만, 자바스크립트에 존재하지 않는 implements를 사용할 것이다.
• implements를 사용하면 코드가 더 가벼워지고, User 인터페이스를 추적할 수가 없는데, 왜냐하면 자바스크립트에는 존재하지 않는 키워드이기 때문이다.
• 인터페이스를 상속할 때는 property로 private로 만들지 못한다.
• 또한 인터페이스를 상속할 때는 property로 protected로 만들지도 못한다.
• 즉, 인터페이스를 상속할 때는 property가 public이어야만 한다.
• 인터페이스는 클래스의 모양을 알려주고, 자바스크립트 코드로 컴파일되지 않는다는 점에서 유용하다.
• 인터페이스를 사용하면 constructor를 사용할 필요도 없다.
• 또한 하나 이상의 인터페이스를 상속해줄 수도 있다.
• 한 클래스에 여러 개의 인터페이스를 상속할 수 있다.

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

---

인터페이스를 타입으로 지정

• 인터페이스를 타입으로 지정할 수 있다.

function makeUser(user: User) {
    return "hi"
}

makeUser({
    firstName: "kwak",
    lastName: "imae",
    fullName: () => "xx",
    sayHi: () => "string"
})

---

인터페이스와 타입의 차이점: 코드 사용법

타입으로 작성한 코드

• 타입은 똑같이 추가할 수 없다. 이미 정의되어 있어서 중복되기 때문이다.

type PlayerA = {
    name: string
}
type PlayerAA = PlayerA & {
    lastName: string
}
type PlayerAA = {
    health: number
}
const playerA: PlayerAA = {
    name: "imae",
    lastName: "kwak"
}

인터페이스로 작성한 코드

interface PlayerB {
    name: string
}
interface PlayerBB extends PlayerB {
    lastName: string
}
interface PlayerBB {
    health:number
}
const playerB: PlayerBB = {
    name: "imae",
    lastName: "kwak",
    health: 100
}

---

타입과 인터페이스의 차이점: 상속과 추상클래스 대체

타입으로 작성한 코드

type PlayerA = {
    firstName:string
}
class User implements PlayerA {
    constructor(
        public firstName: string
    ){}
}

인터페이스로 작성한 코드

interface PlayerB {
    firstName: string
}
class User implements PlayerB {
    constructor(
        public firstName: string
    ){}
}

---

타입과 인터페이스의 차이점: TypeScript 공식 문서

• 인터페이스로 작성한 코드Type Aliases과 인터페이스는 매우 유사하며 많은 경우 자유롭게 선택할 수 있다.
• 인터페이스의 거의 모든 기능은 type에서 사용할 수 있으며, 주요 차이점은 type을 다시 열어 새 속성을 추가할 수 없는 것이다.
• 반면 인터페이스는 항상 확장 가능하다.