[Typescript] Object를 URL 파라미터로 변환하기

Object를 URL 파라미터로 변환하기

아래와 같은 검색용 Interface를 만들었다고 가정하자.

interface RoadmapSearch {
  client?: number;
  title?: string;
  official?: boolean;
  order?: TRoadmapOrder;
  page: number;
}

 

URLSearchParams를 사용하면 RoadmapSearch 타입의 Object를 URL 파라미터 문자열로 바꿀 수 있다.

const query: RoadmapSearch = {
  client: 1,
  title: test,
  official: true,
  order: RoadmapOrder.LATEST,
  page: 1,
};

const param = new URLSearchParams(query);
console.log(param.toString());

// 결과
client=1&title=test&official=true&order=LATEST&page=1

 

하지만 아래와 같이 검색 조건 중 일부만 사용하면, 조건이 정해지지 않은 파라미터들은 다 undefined가 들어가버린다.

const query: RoadmapSearch = {
  title: test,
  page: 1,
};

const param = new URLSearchParams(query);
console.log(param.toString());

// 결과
client=undefined&title=test&official=undefined&order=undefined&page=1

 

이럴 때 아래와 같은 유틸 함수를 작성해 undefined인 파라미터는 반영되지 않도록 할 수 있다.

const objectToParams = (o: Object): URLSearchParams => {
  const searchParams = new URLSearchParams();

  Object.entries(o).forEach(([k, v]) => {
    if (v !== undefined) searchParams.append(k, v.toString());
  });

  return searchParams;
};


const query: RoadmapSearch = {
  title: test,
  page: 1,
};

const param = objectToParams(query);
console.log(param.toString());

// 결과
title=test&page=1