11. 타입스크립트(TypeScript) - Polymorphism + Generic + Class + interface

• 다형성은 다른 모양의 코드를 가질 수 있게 해주는 것
• 다형성을 이룰 수 있는 방법은 Generic을 사용하는 것
• Generic은 Placeholder 타입을 쓸 수 있도록 해준다 (Concrete type이 아니라 Placeholder type)
  • 같은 코드를 다른 타입에 대해서 쓸 수 있도록 해준다 → 다른 타입에게 물려줄 수 있다

 

예제 - 브라우저에서 쓰는 로컬 스토리지 만들기

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 stringsStorage = new LocalStorage<string>()
stringsStorage.get("hello") // string을 넘겨주고 string을 받아온다
stringsStorage.set("bye", "a") // <T>를 <string>이라고 했으므로 value는 string

const booleanStorage = new LocalStorage<boolean>()
booleanStorage.get("xxx") // string을 넘겨주고 boolean을 받아온다
booleanStorage.set("yyy", true) // <T>를 <boolean>이라고 했으므로 value는 boolean

• Storage라는 변수는 JS의 웹 스토리지 API를 위한 이미 선언된 인터페이스 이므로 사용할 수 없는 이름이다
• [key: string]이 의미하는 것은 key가 제한되지 않은, 즉 얼마나 많은진 모르지만 어떤 타입인지는 아는 오브젝트를 정의하는 것이다
• class를 선언할 때 붙는 <T>는 LocalStorage를 초기화 할 때 TS에게 T라고 불리는 Generic을 받을 계획이라고 알려주는 것
  • localStorage를 초기화 하며 받는 <T>는 SStorage로 넘겨주게 되고, SStorage는 T를 사용할 수 있게 된다
  • class에서 Generic을 받음 → interface → interface에서 Generic을 사용
• Generic을 사용하고 있기 때문에 LocalStorage 클래스를 사용하고 싶다면 const stringsStorage = new LocalStorage<string>()과 같이 형식을 지정해줘야 한다
  • 만약, 위의 코드에서 stringsStorage.get()을 하게 되면 string(key)을 보내주고 string을 받게 된다
    • get을 쓰면 string을 보내주고 T를 받는다