[TypeScript] 제네릭 연습

summereuna🐥·2023년 8월 30일

TypeScript

목록 보기
10/13
//브라우저에 쓰는 로컬 스토리지 몌ㅑ와 비슷한 API 만들어 보자
//실제로 만들기보다는 타입(콜 시그니처랑 클래스 만들기)을 좀 써보자.
//실제로 구현은 ㄴㄴ

//Storage 는 이미 TS를 위해 api로 주어지기 때문에 걍 interface Storage라고 하면 기존 스토리지 api에 오버라이딩 되버린다.
//나만의 스토리지 만들고 싶으므로 이름 다른걸로 해야 됨 ㅇㅇㅇ!
interface MyStorage<T> {
   //key가 제한되지 않은 오브젝트 정의
   [key: string]: T
}

//제네릭을 LocalStorage 클래스로 보내고,
//LocalStorage 클래스는 이 제네릭을 MyStorage 인터페이스로 보낸다
//그러면 MyStorage 인터페이스는 제네릭을 사용한다 `T`
class LocalStorage<T> {
   private storage: MyStorage<T> = {}
   //메서드 만들기보다는
   set(key: string, value: T){
      //api 디자인의 구현

      //이미 키가 존재하고 있다면 에러 띄우기
      if(this.storage[key] !== undefined){
        return console.log("이미 존재하는 키입니다.") 
      }
      //key, value를 스토리지에 저장해주기
      this.storage[key] = value;

   }
   remove(key: string){
      //string 형식의 key 받아서 로컬스토리지로부터 지우기
      delete this.storage[key];
   }
   get(key: string): T{
      //string 형식의 key 받아서 T 리턴하기
      return this.storage[key];
   }
   clear(){
      //스토리지 비워주기
      this.storage = {}
   }
}


//인스턴스 생성
//제네릭에 사용할 타입 명시하기

//<>에 타입 넣으면 T로 표시했던 곳 동일한 타입으로 나옴 
const stringsStorage = new LocalStorage<string>()
stringsStorage.get("문자열");
stringsStorage.set("키", "밸류");

const booleansStorage = new LocalStorage<boolean>()
booleansStorage.get("xxx");
booleansStorage.set("키", true);

profile
Always have hope🍀 & constant passion🔥

0개의 댓글