[ TS ] Classes and Interfaces

🔴  Classes

⚪  타입스크립트의 기본적인 클래스 형태

 

class Player {
  constructor(
    private firstName: string,
    private lastName: string,
    public nickname: string
  ) {}
}

const ryong = new Player("ryong", "jeong", "Ryong");
ryong.nickname;

  ⚪  자바스크립트와는 다르게 접근 지정자를 선언할 수 있다.

  ⚪  생성자 파라미터에 있는 변수들을 자동으로 클래스의 this 변수에 할당한다.

 

⚪  추상 클래스는 다른 클래스에서 상속받을 수만 있는 클래스이며, 새로운 인스턴스를 만들 수 없다.

⚪  추상 메소드는 추상 클래스를 상속받는 클래스에서 구현해야 하는 메소드를 의미한다.

 

// 추상 클래스
abstract class User {
  constructor(
    protected firstName: string,
    protected lastName: string,
    protected nickname: string
  ) {}
  // 추상 메소드
  abstract getNickname(): void
}

class Player extends User {
  getNickName() {
    console.log(this.nickname)
  }
}

const ryong = new Player("ryong", "jeong", "Ryong");
ryong.getNickname()  // Ryong

 

type Words = {
  [key: string]: string
  // ex) "food": "kimchi"
}

class Dict {
  private words: Words  // 프로퍼티를 만들고
  constructor() {
    this.words = {}  // 초기화해주기
  }
  add(word: Word) {  // 💡 클래스를 파라미터 타입으로 사용할 수 있다!
    if (this.words[word.term] === undefined) {
      this.words[word.term] = word.def;
    }
  }
  def(term: string): string {
    return this.words[term]
  }
}

class Word {
  constructor(  // readonly를 통해 모든 곳에서 접근하지만 수정할 순 업도록 만듦
    public readonly term: string,
    public readonly def: string
  ) {}
}

const dist = new Dict()
const kimchi = new Word("kimchi", "한국의 음식");

dict.add(kimchi)
dict.def("kimchi")  // 한국의 음식

 

🟠  Interfaces

⚪  인터페이스는 오브젝트의 모양을 타입스크립트에게 설명해주기 위해서 사용된다.

 

⚪  추상 클래스와 인터페이스 비교

⚪  추상 클래스

 

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

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

⚪  인터페이스

 

interface User {
  firstName: string,
  lastName: string,
  fullName(): string,
  sayHi(name: string): 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): User {
  return {
    firstName: "ryong",
    lastName: "jeong",
    fullName: () => "return string",
    sayHi: (name) => "string"
  }
}
// 인터페이스 파라미터
makeUser({
  firstName: "ryong",
  lastName: "jeong",
  fullName: () => "return string",
  sayHi: (name) => "string"
})

⚪  추상 클래스는 컴파일 시, 자바스크립트의 일반 클래스로 해석된다. 

⚪  반면 인터페이스는 추상 클래스와 같은 기능을 제공하지만, 컴파일 시 자바스크립트 파일에서 제외되므로 파일 사이즈가 줄어들게 된다.

⚪  따라서, 추상 클래스를 다른 클래스들이 특정 모양을 따르도록 하기 위한 용도로 사용하려면 같은 역할을 하는 인터페이스를 사용하는 편이 효율적이다.

⚪  인터페이스는 어댑터 패턴과 같은 디자인 패턴을 사용하여 팀과 함께 일할 때, 인터페이스를 만들어두고 팀원이 원하는 각자의 방식으로 클래스를 상속하도록 하는 방법으로 많이 사용된다.

 

⚪  타입과 인터페이스 비교

⚪  타입

 

// type을 사용하여 object 모양 정의
type PlayerA = {
  name: string
}
type PlayerAA = PlayerA & {
  lastName: string
}
const playerA: PlayerAA = {
  name: "ryong",
  lastname: "jeong"
}

⚪  인터페이스

 

// interface를 사용하여 object 모양 정의
interface PlayerB {
  name: string
}
interface PlayerBB extends PlayerB {
  lastName: string
}
interface PlayerBB {  // 같은 이름 interface끼리 중첩 가능
  health: number
}
const playerB: PlayerBB = {
  name: "ryong",
  lastName: "jeong",
  health: 10
}

 

type PlayerA = {
  firstName: string
}
interface PlayerB {
  firstName: string
}
// PlayerA 타입을 상속할 수 있으면서 PlayerB도 상속할 수 있다.
class User implements PlayerA {
  constructor(
    public firstName: string
  ) {}
}

⚪  타입스크립트 커뮤니티에서 클래스나 오브젝트의 모양을 정의하고 싶으면 인터페이스를 사용하고, 다른 모든 경우에서는 타입을 쓰라고 하고 있다.

 

🟡  Polymorphism

 

interface SStorage<T> {
  [key: string]: T
}

class LocalStorage<T> {
  private storage: SStorage<T> = {}  // 제네릭 전달
  set(key: string, value: T) {
    this.storage[key] = value;
  }
  remove(key: string) {
    delete this.storage[key]
  }
  get(key: string): T {
    return this.storage[key]
  }
  clear() {
    this.storage = {}
  }
}

const stringStorage = new LocalStorage<string>();
stringStorage.get("key")
stringStorage.set("hello", "how are you")

const booleanStorage = new LocalStorage<boolean>();
booleanStorage.get("key")