🔖

[TypeScript]undefinedよりnullが便利な場面

に公開

nullとundefinedの使い分けって悩みますよね、
で、検索してみるとundefinedに寄せると良い書いてあるんですが、
脳死で寄せるんじゃなくて、便利なところはnull使うといいと思います。

const FormSchema = z
  .object({
    name: z.string().nonempty('必須です'),
    nameKana: z.string().optional(),
})

こんなフォームがあるとします。kanaのみオプショナルです。
で、Editで使うことを考えてみます。

apiを用意しておいて

userFindUnique = {
  const result = await ctx.prisma.user.findUnique({
    where: {id: input.id},
    select: {
      name: true,
      // nameKana: true,
    },
  });
  return result;
});

フロントでフェッチしてフォームに初期表示させますよね、

const fetchdValue = await utils.user.findUnique.fetch({ id: userId });

const defaultValues: (typeof FormSchema)['_type'] = fetchdValue

気づきましたか?nameKanaをselectするのを忘れてるのに、型エラー出ません。
これだとEdit時フォームに値が出て欲しいのに出なくなります。

2個だったらいいんですが、下のように多くの項目があってどれか一つ忘れてるとしたら、辛いですよね。ブラウザで編集してみて、値が出るはずなのに出ないってのを確認しないといけません。
(型で守れるところのテストを書きたくないし、)

エラー出ない

エラー出る

せっかく用途が違うものが二つあるので適材適所使い分けていきたいですよね。
*コードは例で端折ってます

Discussion