[타입스크립트] 다형성

다형성을 이룰 수 있는 방법은 제네릭을 사용하는 것 (generic 인자 전달 가능) 

 

제네릭은 placeholder 타입을 쓸 수 있음 

타입스크립트가 placeholder > concrete 타입으로 바꿔줌 

같은 코드를 다른 타입에 대해서 쓸 수 있도록 해줌 

 

* 브라우저에서 쓰는 로컬 스토리지 API와 비슷한 API를 제네릭으로 만듦 ( 제네릭 + 다형성 + 클래스 + 인터페이스 ) 

일반적인 자바스크립트에서 사용한 로컬 스토리지 API와 같은 API를 가지는 클래스를 만듦

 

 

 

---

웹 스토리지 API  - Storage()

기존 쿠기의 문제점을 해결하기 위해 웹 브라우저가 직접 데이터를 저장할 수 있게 함

HTML5 이전에는 응용 프로그램이 데이터를 서버에게 요청할 때 마다, 매번 쿠키라는 곳에 정보를 저장함 

→ 웹 스토리지는 사용자 측에서 많은 양의 정보를 안전하게 저장할 수 있도록 함 

 

※  웹 스토리지 지원 여부 확인  : 웹 브라우저가 웹 스토리지를 지원하는지 확인 

if(typof(Storage) !== "undefined"){
	// webstorage ~ 
    }else {
    //wetb store를 지원하지 않는 브라우저를 위한 안내
    }

※ 웹 스토리지 API는 사용자가 데이터를 저장할 수 있도록 두 가지 객체 제공 

웹 스토리지 API는 사용자가 데이터를 저장할 수 있도록 2 개 객체를 제공 

- sessionStorage : 하나의 세션만을 위한 데이터 저장 객체 (브라우저나 탭을 닫으면 데이터 사라짐) 

- localStorage : 보관 기한이 없는 데이터를 저장할 수 있는 객체 (데이터 없어지지 않음)

 

Web Storage의 Storage 인터페이스는 특정 도메인의 세션 or 로컬 스토리지에 대한 엑세스를 제공함

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

 

특정 도메인의 세션 or 로컬 스토리지에 대한 엑세스를 제공( 저장된 데이터 항목 추가 or 수정 or 삭제 허용)

Storage.length    storage 개체에 저장된 데이터의 항목 수를 나타내는 정수를 반환 

Storage.key()    숫자가 전달되면 n이 메서드는 저장소에 있는 n번째 키의 이름을 반환 

Storage.getItem() 키 이름을 전달하면 해당 키의 값을 반환 

Storage.setItem() 키 이름이 전달되면 해당 키를 저장소에 추가 or 이미 있는 경우 업데이트

Storage.removeItem() 키 이름이 전달되면 스토리지에서 해당 키를 제거

Stroage.clear() 호출되면 저장소에서 모든 키를 비움

 

locatStorage클래스를 초기화할 때 제네릭을 받아옴, 제네릭은 다른 타입에 물려줄 수 없음 

제네릭은 클래스 이름에 들어오지만 같은 제네릭을 인터페이스로 보내, 인터페이스는 제네릭을 사용함 

get , set을 이용해 코드 가져옴 

interface SStorage "
	[key:string]:T
    }

class LocalStorage{
	private storage : SStorage = {}
    
    // 만들기 
    set(ket:string, value : T) {
    	if(this.stprage[key] !== undefined){
        return console.log(`${key}가 이미 존재합니다. update호출 바랍니다.`}
        this.storage[key] = value
        }
        
    // 읽기 
    get(key:string): T | void {
    	if(this.storage[key] === undefined) {
		return console.log(`${key}가 존재하지 않습니다.`)
        }
    }return this.storage[key]
    
    // 업데이트
    update(key : string, value:T){
    	if(this.storage[key] !== undefined){
        	this.storage[key] = value
            }
        }
    
    // 삭제
    remove(key: string){
    	if(this.storage[key] === undefined){
        return console.log(`{key}가 존재하지 않습니다.`}
        }
        	delete this.storage[key]
            }
            clear(){
            this.storage={}
            }
        } 
        
   const stringStorange = new LocalStorage()
   const booleanStorage = new LocalStorage()

 

예제

interface SStorage<T>{
    // 타입스크립트에 이미 선언된 자바스크립트 웹 스토리지 
    [key :string] : T
}
    // 클래스는 인터페이스로 보냄 
class LocalStorage<T> {
    // 제네릭을 클래스로 보냄 
    private storage : SStorage<T> = {}
        set(key:string, value:T) {
            // API디자인의 구현 
            // key와 value를 저장하려면
            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>()

//string을 보내주고 T를 받음 (concrete타입으로 바뀌기 때문 )
// 제네릭을 바탕으로 콜 시그니처를 만들기 때문 
stringsStorage.get("key")
stringsStorage.set("Hello","howareyou")

const booleansStorage = new LocalStorage<boolean>();
booleansStorage.get("xxx")
// set의 value가 string이 될 수 없음 
// boolaansStorage.set("key", true)