TypeScript 기초(6) : Polymorphism

 Polymorphism(다향성) : 다른모양의 코드를 가질 수 있게 해줌

---> 다향성을 이루려면 generic을 사용해야하는데

      ---> 이때 제네릭은 placeholder 타입을 사용할 수 있게 해줌 

 

로컬스토리지 API와 비슷한 API 타입 시뮬레이션 해보

: 제네릭,다향성,클래스,인터페이스 합쳐서 작업해보기 

interface Storage {
    
} 

class LocalStorage {
    private storage :
} private을 가지는 storage를 만들고 타입을 Storage로 정한다 했을 때,

이때 interface Storage가 이미 정의가 돼 있다고 나오는데,

이건 타입스크립트에 의해 선언된 자바스크립트 웹 스토리지 API를 위한 인터페이스임

위와 같이 하게되면 Storage에 새 property를 추가하게 됌

 

그래서 Storage이름을 ==> SStorage로 바꿔줬음

 

interface SStorage {
    [key : string] // key가 제한되지 않은 오브젝트를 정의하게 해줌
}

class LocalStorage<T> {
    private storage : SStorage = {}
} // localStrorage를 초기화할 때, TS에게 T라고 불리는 제네릭을 받을 계획이라고 설정

 @여기서 generic인 <T>는 그냥 이름이고 아무거나 상관 없지만, 보통 T or M 을 사용

 

 

제네릭은 다른 타입에게 물려줄 수 있는데,

 지금 위에 제네릭은 클래스 이름에 들어오지만 , 아래와같이 같은 제네릭을 인터페이스로 보내줄 것임

class LocalStorage<T> {
    private storage : SStorage<T> = {}
}

==> 인터페이스는 여기서 제네릭을 받고 

interface SStorage {
    [key : string] : T
}

==> key 앞에 T가 위치할 것이라고 알려줌

 

즉 제네릭을 클래스로 보내고, ---> 클래스는 제네릭을 인터페이스로 보낸 뒤에 ----> 인터페이스는 제네릭을 사용함

 

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

class LocalStorage<T> {
    private storage : SStorage<T> = {}
    set(key : string, value:T) {

    } //string형식의 key를 넣어주고 value로 T를 넣어줌
}

 

 

api 디자인 구현을 위한 메소드를 사용

• set(key, value) : key를 이용해 value를 저장한다.
• get(key) : key에 해당하는 값을 반환한다. (key가 존재하지 않으면 undefined를 반환.)

class LocalStorage<T> {
    private storage : SStorage<T> = {}
    set(key : string, value:T) {}
    remove(key:string){}//remove는 string형식의 key를 받아서 로컬스토리지로부터 지움
    get(key:string) : T {} // get은 key를 받고 T를 리턴 
    }
}

 key 값으로 .value를 스토리지에 저장해주려면 아래와 같이 작성 

 set(key : string, value:T) {
        this.storage[key] = value;
    }

 

<완성본>

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 사용하기

const stringStorage = new LocalStorage<string >

==> stringStorage = string타입의 LocalStorage

 

이때 아래와 같이 작성해보면 

stringStorage.get()

=>string을 보내고, string을 받음 

 

get(key:string) : T {
        return this.storage[key]
    }

위에 작성한 get코드를 봤을때, get을 쓰면, string을 보내주고 T를 받는다고 적혀있음

 

====>  Typescript는 제네릭을 바탕으로 call signature을 만들어주는데,

call signature을 살펴보면 [ get(key: string): string ] => 즉 Tstring 형식의 key를 사용해서 string을 받게 되는 것임

 

set()도 같음

stringStorage.set("hello", "how are you")

TS가 하는 일은 T인 value를 string인 value로 바꿔주는 것

 

 

 

또 다른 예로 아래와 같이 boolean을 받는 booleanStorage를 만들었을때 ,

const booleansStorage = new LocalStorage<boolean>();

booleansStorage.get("xxx")

get("xxx") ==> 이렇게 스트링을 줬을때 boolean을 받아옴

 

booleanStorage의 set() 

booleansStorage.set("hello" ,true)

booleanStorage는 set의 value가 boolean으로 되어있기 때문에 (위 set코드에  this.storage[key]=value 때문에)

key는 string이 되지만 value로는 boolean을 넣어줘야함