복습

인터페이스는 메소드와 property를 클래스가 가지도록 해준다.
인터페이스는 자바스크립트로 컴파일 되지 않는다.
-> 추상 클래스와 비슷한 보호를 제공하지만, 인터페이스는 자바스크립트 파일에서 보이지 않다.

Q. 추상클래스를 다른 클래스들이 특정 모양을 따르도록 하기 위한 용도로 쓴다면
-> 인터페이스를 쓰는게 더 좋다.
-> extends보다 implements 권장
-> 인터페이스가 자바스크립트 코드에서 보이지 않기 때문에

Type과 Interface

Q. 타입을 쓰고 싶다면
-> type 키워드를 쓰면 된다.

// 타입스크립트에게 object의 모양을 알려줄 때 목표는 동일하지만, 할 수 있는 건 다르다.  

// 1. type을 사용할 때 
type PlayerA = {
  name: string
}
const playerA: PlayerA = {
  name: 'nico'
}

// 2. interface를 사용할 때 
interface PlayerB {
  name:string
}
const playerB: PlayerB = {
  name: 'nico'
}

// Q. 타입을 상속시킬 수 있을까? -> 추상 클래스를 대체할 수 있을까? ㅇㅇ 가능.  

// 1. type을 사용할 때 
type PlayerA = {
  name: string
}
type PlayerAA = PlayerA & {
  lastName:string
}

// 나중에 property를 추가하고 싶다면? 
// 이렇게 해줄 수 없다. PlayerAA 타입이 이미 정의되어서 중복되기 때문 
type PlayerAA = {
  health: number
}
const playerA: PlayerAA = {
  name: 'nico',
  lastName: 'las'
}

// 2. interface를 사용할 때 
interface PlayerB {
  name:string
}
interface PlayerBB extends PlayerB {
  lastName:string
}
// 인터페이스인 경우는 문제 없다. 
interface PlayerBB {
  health: number
}
const playerB: PlayerBB = {
  name: 'nico',
  lastName: 'las',
  health: 3
}

typescript docs

타입과 인터페이스가 매우 유사해서 둘 중에 하나를 자유롭게 사용할 수 있다. 인터페이스의 대부분 기능은 타입에도 있다.
*차이점 : type은 새 property를 추가하기 위해 다시 선언될 수 없다. 인터페이스는 항상 상속이 가능하다.

Q. 인터페이스에 새로운 타입, 필드를 추가할 수 있을까?
-> 가능하다.
type는 불가능.

결론

타입스크립트에게 object의 모양을 알려주기 위해서는 interface를 사용하고 나머지는 type을 쓴다.

Polymorphism

-> 다형성, 제네릭, 클래스, 인터페이스를 모두 합쳐볼 것이다.

다형성은 다른 모양의 코드를 가질 수 있게 해주는 것. 즉, 한 코드의 개념은 여러 방법으로 사용 가능함.

다형성을 가능하게 하려면, generic(제네릭)을 사용하는 것이다.

generic을 사용하면 좋은점 :
1) 코드를 이쁘게 보이게 해줌
2) 같은 코드를 다른 타입에 대해서 쓸 수 있게 해준다.

// 실제로 구현되지는 않음. 
// 브라우저에서 쓰는 로컬 스토리지 API와 비슷한 API를 만들어 볼 것임.

// Storage : 타입스크립트에 의해 이미 선언된 JS의 웹 스토리지 API를 위한 인터페이스 
// Storage -> SStorage
interface SStorage<T> {
  // key가 제한되지 않은 object를 정의하게 해준다. 
  [key:string]: T
}

// LocalStorage 클래스를 초기화 할 때 제네릭을 받을 계획이다.
// 제네릭은 다른 타입에 물려줄 수 있다. (상속 가능함.) 
// generic을 class에 보내고 class는 interface에 generic을 보내고 
// interface는 generic을 사용한다. 
class LocalStorage<T> {
  // 특정한 형태를 가지게 된다. -> 모양을 설명해주기 위해 인터페이스 사용 
  private storage : SStorage<T> = {}
  // 로컬 스토리지의 API 디자인의 구현을 보여주는 것.  
  // set에 key와 value를 스토리지에 저장해주려면, 
  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(){
    // clear는 스토리지를 비워주었음. 
    this.storage = {}
  }
 }

 const stringStorage = new LocalStorage<string>()
// ts는 제네릭을 바탕으로 call signature을 만들어준다. 
 stringStorage.get("key")
 stringStorage.set("Hello", "How are you?")

 const booleanStorage = new LocalStorage<boolean>()
 booleanStorage.get("xxx")
 booleanStorage.set("Hello", false)

결론

다형성을 연습하는 것이 애먹을 것 같다. 이번에 컨디션이 안좋아서 그러는지는 잘 모르곘지만, 어제, 그저께 들었던 것처럼 강의가 빡 이해되지는 않았다. 그냥 나쁘진 않았는데, 베스트는 아닌..? 체력을 키워야겠다.