Vueのpropsでnullを渡す

Vueのpropsでnullを渡すときに自分の思っている挙動と違ったのでメモ。

props: {
  user: {
    type: Object as PropType<User | null>,
    required: true
  }
}

こんな感じのpropsを受け取るとする。

propsを渡す側(親コンポーネント)で、

<Child
  :user="user"
/>

こんな感じで渡すと思うんだけど、ここでnullを渡すと怒られる。

[Vue warn]: Invalid prop: type check failed for prop "user". Expected Object, got Null

propsの型定義でUser | nullとしているので、nullを受け取れるかと思いきやダメだった。

結果として、required: trueを外すことでnullを受け取れた。

自分のイメージでは、propsを受け取らない(親コンポーネントでpropsとして渡さない)こともできる状態がrequired: falseだと思っていたので、「userというpropsを受け取ることは必須で、そのuserの型がUser | nullである」というつもりで定義したのだけど、どうやら挙動は違うっぽい。

Vueのバージョンは2.6.14です。

ちゃんと調べていないんだけど、required: falseにして、実際にpropsが渡されないとuserはundefinedになり、さらにdefault: nullのようにdefaultを設定することでnullにできるっぽい。たぶん。

「propsを渡す/渡さない」と「propsを渡し、その型はUser | null」とでは意味合いが異なるので、ここの差は気をつけたい。

propsにおけるnull(と今回は使っていないがundefinedも)の挙動は注意しなければいけないなと思った。