[typescript] vue route query 를 가져올 때 query 형식 때문에 발생하는 typescript 에러 처리, LocationQueryValue, LocationQueryValue[]

사용중인 프레임워크: vue3

 

검색 시에 쿼리스트링으로 검색내용들을 저장해놓고

페이지가 새로고침 되었을 때 쿼리스트링에 담겨있는 내용을 가져와 검색 객체에 set 해주는 기능을 구현하는데

type 관련 문제가 있었다.

route.query 에서 반환하는 타입이 string 이 아닐 수 있다는 이유로 다음과 같은 에러가 발생한다.

검색객체의 interface 에 LocationQueryValue 타입을 추가해주는 방법도 있지만 사실 값은 실제로 number 아니면 String 이어야만 하기 때문에 불필요한 타입을 추가하는게 마음에 걸렸다.

그래서 다음과 같이 객체에 초기화되어있는 값의 type을 체크해서 무조건 String 또는 Number 로 타입을 변환하는 작업을 추가했다.

    const makeParamByQueryString = () => {
      Object.keys(form.value).forEach(function (key: string) {
        if ('undefined' === typeof route.query[key] || route.query[key] == '') return true;
        const queryParam: string | number =
          'number' === typeof form.value[key] ? Number(route.query[key]) : String(route.query[key]);
        form.value[key] = queryParam;
      });
    };
    
    //참고로 form.value 는 vue3 ref 를 사용하기 때문에 이렇게 되어있는 것이고 그냥 검색객체로 취급하면 된다.