Vue3のdefinePropsの書き方

はじめに

みなさん、 <script setup> は使ってますか？
これはVueJS3から導入されたConpositionAPIという、Reactをパクって参考にして作られた書き方で、TypeScriptで書きやすくなったりとか、Pluginとか使わずに外のコードを引っ張ってきやすくなったりとか、OptionalAPIの頃にはなかったいろいろなメリットがあって、みんなこっちに来たのだと思ってます。

OptionalAPIのころはコンポーネントのpropsなんて

<script>
export default {
  props: {
    hoge: {
      type: String,
      required: true,
    },
    fuga: {
      type: Boolean,
      required: false,
      default: false
    }
  }
};

って書けばよかったのに、CompositionAPIになったらどうしたらええねんと戸惑った方も多いかと思います。
いや、ドキュメントに普通に書いてあるから特に戸惑ってないですか？

JavaScriptで書くdefineProps

なんのことはなく、 defineProps というマクロ関数使えば今まで通り書けます。
TypeScriptでもこれで動くんですが、これだとせっかくの型システムが効かないので違う書き方をしましょう。

<script setup>

const props = defineProps({
  hoge: {
    type: String,
    required: true,
  },
  fuga: {
    type: Boolean,
    required: false,
    default: false
  }
});

TypeScriptで書くdefineProps

今日日やっぱりTypeScriptの方が型指定できるしありがたいよね、ということでTypeScript用の書き方があります。
default値はv3.5以降であれば分割代入を使うといけます。

<script setup lang="ts">

const { hoge, fuga = false } = defineProps<{
  hoge: String,
  fuga?: Boolean
}>();

v3.4以前

v3.4以前では分割代入によるdefault値の指定ができないので withDefaults マクロ関数でさらにラップする必要があります。
見た目的にも結構ツライので、よほどの事情がない限りなるべく新しいバージョンのVueJSを使ったほうがいいと思います。

<script setup lang="ts">

const props = withDefaults(defineProps<{
  hoge: String,
  fuga?: Boolean
}>(), {fuga: false});

おわりに

この記事は2025年の前半ぐらいまでに途中まで書いててほったらかしてました、、、
お陰で2025年に書いた記事はゼロっぽいです。
今年はもうちょっとちょこちょこ書けたらいいなと思います。よろしくお願い致します。