typescriptでnext.jsのpage routerのクエリパラメータの値を取得

概要

next.jsのpage routerから取得したクエリパラメータ項目の値（router.query.hoge）の型はstring | string[] | undefinedであるが、それを利用する時にstring[]場合の処理を書かなければならない。ただ、ほとんどの場合はstring[]がありえないケースに対して、短く書く方法を探求する。

詳細

型が同じな項目のパラメータをまとめることで、余計なif分岐が減らせる。
一番多いケース用の共通関数を用意する上で、特別なケースをカーバするような関数も作る。
keys引数の指定で同じ型の項目をまとめて取得できる。

1. 一番多いケースの共通関数を作る

• 配列場合の処理を入れて、一番目の値だけを取得する
• 戻り値の型がRecord<string, string | undefined>になる

export const getQueryParams = (router: NextRouter, ...keys: string[]) => {
  const targetKeySet = keys.length ? new Set(keys) : new Set(Object.keys(router.query));
  return Object.entries(router.query).reduce<Record<string, string | undefined>>((acc, [key, value]) => {
    if (targetKeySet.has(key)) {
      if (Array.isArray(value)) {
        acc[key] = value[0];
      } else if (value) {
        acc[key] = value;
      }
    }
    return acc;
  }, {});
};

2.項目の値が配列の関数を作る

• 値が1個だけ場合の処理を入れて、それを配列にする
• 戻り値の型がRecord<string, string[] | undefined>になる

export const getQueryParamsAsArray = (router: NextRouter, ...keys: string[]) => {
  const targetKeySet = keys.length ? new Set(keys) : new Set(Object.keys(router.query));
  return Object.entries(router.query).reduce<Record<string, string[] | undefined>>((acc, [key, value]) => {
    if (targetKeySet.has(key)) {
      if (Array.isArray(value)) {
        acc[key] = value;
      } else if (value) {
        acc[key] = [value];
      }
    }
    return acc;
  }, {});
};

まとめ

あるクエリパラメータhogeに対して、それの型がstringとstring[]のどちらかしかないのは事前にわかっているので、それを取得する共通関数を用いて型の種類がより少なくなり、使い型で不要なif分岐を減らすことでより描きやすくなる。