📌 Polymorphism (다형성)
프로그램 언어의 각 요소들(상수, 변수, 식, 오브젝트, 함수, 메소드 등)이 다양한 자료형(type)에 속하는 것이 허가되는 성질
TypeScript에서는 제네릭을 사용하여, 같은 코드를 다른 타입에서도 사용할 수 있도록 하여 다형성을 갖는다.
generic? 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법
💡 LocalStorage API 만들기
🔎 지금까지 배운 다형성, 제네릭, 클래스, 인터페이스를 전부 합쳐보자!
interface SStorage {
[key: string]
}Storage는 이미 JavaScript 안에 이미 내장된 인터페이스이기 때문에, SStorage라는 인터페이스를 생성하였다.
Storage: Web Storage API 의 Storage 인터페이스는 특정 도메인의 세션 또는 로컬 스토리지에 대한 액세스를 제공한다. (ex. 저장된 데이터 항목 추가, 수정, 삭제 가능)
위와 같이 작성 시, class LocalStorage는 초기화될 때마다 <T>라는 제네릭을 받게 된다.
⇒ ✨ 클래스에서 사용한 제네릭은 클래스 내부의 다른 타입에게 물려줄 수 있다.
(위 경우, 클래스 → 인터페이스)
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 = {}
}
}완성된 LocalStorage API !
const stringsStorage = new LocalStorage<string>(); 클래스 LocalStorage 가 제네릭 타입을 사용하고 있기 때문에, 해당 클래스의 인스턴스를 생성할 때엔 위와 같이 타입(<string>)을 명시해줘야 한다.
타입을 명시하면, TypeScript가 제네릭을 concrete타입으로 변환시켜준다!
class LocalStorage의 인스턴스인stringsStorage는 string 타입으로 정의하였으므로, class 내장 get 메소드의 return 타입 또한 string이 된다.
const booleansStorage = new LocalStorage<boolean>();
booleansStorage.get("xxx")마찬가지로, booleansStorage의 타입을 boolean으로 정의하였으므로, get 메소드가 boolean 타입을 return한다.
⇒ ✨ 제네릭을 사용해 다형성을 구현하였다!
✨ 최종
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("key")
stringsStorage.set("hello", "hi")
const booleansStorage = new LocalStorage<boolean>();
booleansStorage.get("xxx")