TS - Interface

타입스크립트에서 객체의 type을 지정해주는 방법에는 2가지가 있다.

하나는 type 키워드를 통한 기본적인 방법이고,

나머지 하나는 Interface 키워드를 통한 방법이다.

---

1. type의 쓰임새

type 키워드는 여러가지 방법으로 다양하게 사용 가능하다.

객체 외의 다른 자료형의 타입도 지정 가능하다.

 

---

1-1. 기본적인 타입 지정 ( ailas )

type Dmg = number
type Name = string

type Player = {
  name: Name,
  dmg : Dmg,
}

const bob : Player = {
  name: 'bob',
  dmg: 10
}

 

1-2. 타입이 특정 값을 가지도록 제한

type Team = 'red' | 'green' | 'yellow'
type Health = 10 | 20 | 30

type Player ={
  name: string
  team: Team
  health: Health
}

const bob : Player = {
  name: 'Bob',
  team: 'red',
  health: 10
}

---

2. interface의 쓰임새

interface는 TS에게 객체의 형태를 설명하고 싶을 때 사용하는 키워드이다.

type으로는 불가능한 타입 지정 방식이 interface로는 가능하다.

---

2-1. extends 키워드를 통한 상속

interface User {
  name: string
}

interface Player extends User{  
}

const bob : Player ={
  name: "Bob",
}

 

2-2. 동일한 이름의 여러개의 interface를 자동으로 병합

 

interface User {
  name: string;
}

interface User {
  healthBar: number;
}

interface User {
  isAdmin: boolean;
}

const bob: User = {
  name: "Bob",
  healthBar: 10,
  isAdmin: false,
};

---

3. interface사용법 ( feat. 추상 클래스 )

 

3-1. 추상 클래스의 단점

특정 클래스의 상속과 구현을 강제하려면 추상 클래스를 사용했다.

abstract class User{
  constructor(
    protected firstName:string,
    protected lastName:string
  ){}
  abstract sayHi(name:string):string;
  abstract fullName():string;
}

class Player extends User{
  sayHi(name:string){
    return `Hello ${name}!`;
  }

  fullName(){
    return `${this.firstName} ${this.lastName}`;
  }
}

하지만 추상클래스에 단점이 있다면,

자바스크립트에는 abstract 라는 개념이 없기 때문에

추상클래스도 일반적인 클래스로 변환된다.

 

상속받는 다른 클래스들이 표준화된 프로퍼티, 메소드를 가지도록 청사진 역할을 할 뿐이고

직접적인 인스턴스 생성이 불가함에도...

JS로 변환된 코드에는 일반 클래스로 변환되어 남아있다.

 

위와 같은 상황에 interface 사용을 고려할 수 있다.

---

3-2. interface 사용법

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

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

  fullName(){
    return `${this.firstName} ${this.lastName}`;
  }
}

 

interface를 정의한 후(메소드의 경우 abstract 키워드는 사용하지 않는다.)

해당 interface를 구현할 class에서 implements 키워드를 사용한다.

ex) class Player implements User

말 그대로 Player 클래스는 User 인터페이스를 구현한다. 

 

*주의해야할 점

interface 상속을 통해 구현하는 class에서 프로퍼티는 항상 public 이어야 한다.

---

4. interface VS type ( 차이점 )

1. Type Alias는 새로운 프로퍼티 추가를 위해 같은 이름으로 선언할 수 없지만,
   interface는 항상 선언적 확장이 가능하다.
   
   
2. Type Alias는 computed property 사용이 가능하지만,
   interface는 불가능하다.