[노마드 리액트 스터디] 15일차 - 타입스크립트 챌린지(6)

classes 그리고 interfaces 를 활용하여, 아래 API를 위한 '미니' 버전을 구현하세요.

Usage:
localStorage.setItem(, )
localStorage.getItem()
localStorage.clearItem()
localStorage.clear()

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

abstract class LocalStorage<T> {
   private storage : SStorage<T> = {}
// 밑에처럼 컴파일됨.
//    constructor() {
//         this.storage = {};
//     }
   setItem(key:string, value:T){
        this.storage[key] = value;
   }
   clearItem(key:string){
        delete this.storage[key]
   }
   getItem(key:string):T {
        return this.storage[key]
   }
   clear(){
        this.storage = {}
   }
}

• 오버로딩은 call signature가 어려개 있는 함수야.
• 왜 geolocation은 함수를 인자로 받는가?
• success 함수는 무슨 타입으로 지정할거야?
• 구현에 목적을 두는게 아니라 타입 지정에 목적을 두고 풀어보자!
• 콜백 방식의 비동기

Geolocation API

type successFn = (position:GeolocationPosition) => void
type errorFn = (positionError:GeolocationPositionError) => void
type optionsObj = {maximumAge:number,timeout:number,enableHighAccuracy:boolean}

class FakeGeolocation {
    getCurrentPosition(success: successFn): void
    getCurrentPosition(success: successFn, error:errorFn): void
    getCurrentPosition(success: successFn, error:errorFn, options:optionsObj): void
    getCurrentPosition(success: successFn, error?:errorFn, options?:optionsObj){
        //구현하는 식을 여기에 쓴다.
    }
    watchPosition(success: successFn): number
    watchPosition(success: successFn, error:errorFn): number
    watchPosition(success: successFn, error:errorFn, options:optionsObj): number
    watchPosition(success: successFn, error?:errorFn, options?:optionsObj){
        //구현하는 식을 여기에 쓴다.
        return 1;
    }
    clearWatch(id:number){}
}

나의 틀린 풀이

type Place = {
     longtitude: number;
     latitude: number;
     accuracy:number;
 }

 interface Llocation {
     [id:number] : Place
 }

 interface CurrentPosition{
     successFn: typeof successFn
     errorFn?:typeof errorFn
     optionsObj?: optionsObj
 }

 interface optionsObj {
     enableHighAccuracy?: boolean
     maximumAge?: number
     timeout?: number
 }

 function successFn(pos: Place) {
   const crdLt = pos.longtitude;
   const crdLat = pos.latitude;
   const crdAc = pos.accuracy;
 }

 function errorFn(err: { code: string; message: string; }) {
   console.warn(`ERROR(${err.code}): ${err.message}`);
 }

 abstract class Ggeolocation {
     private llocation : Llocation = {}

     getCurrentPosition({successFn, errorFn, optionsObj} : CurrentPosition){
         if(this.llocation[id] ? successFn : errorFn)
     }
     watchPosition({successFn,errorFn,optionsObj}:CurrentPosition){
         return this.llocation[id]
     }
     clearWatch(id:number){
        delete this.llocation[id]
     }
 }