Vue warnで「Invalid prop: type check failed for prop. Expected String | Null, got Undefined」が出る

Question

Typescriptの勉強をしています。
Vue3でtypescriptを使用しています。

コンポーネントを呼び出してページのタイトルを記述しているのですが、

[Vue warn]: Invalid prop: type check failed for prop "event_name". Expected String | Null, got Undefined  

が出てしまいます。

こちら、動き的には問題ないのですがどのように改善すればよいかアドバイスいただけますと幸いです。

■親のVueファイル

<template>
    <AdminEventTitle
            :event_name="event?.name"            
            :event_type="event?.event_type"
        />
</template>

<script setup lang="ts">
import AdminEventTitle from '@/Components/Molecules/AdminEventTitle.vue'
import { Event } from '@/Components/Admin/Event/EventList.vue'
const event = ref<Event>()

const getEvent = async () => {
    const endpoint = `/api/v1/{省略}/`
    await axios.get(endpoint)
        .then((response: any) => {
         
            event.value = response.data
    })
    .catch((err) => {
        console.log(err)
    })
}

onMounted(async () => {  // ★eventはここで取得しています。
    await getEvent()
}

</script>

■子コンポーネント　　AdminEventTitle.vue

<template>
    <div class="text-gray-800">
        <div>
            <h1 class="text-center text-xl font-semibold">{{event_name}}：{{event_type}}</h1>
        </div>
        <div class="text-sm mb-6 text-center">
            スタート日：
        </div>
    </div>
</template>

<script setup lang="ts">

type Props = {
    event_name: string | undefined,
    event_type: string | undefined,
}
const props = defineProps<Props>()

</script>

string | undefined と定義しているのですが・・・

Answer 1

props の型として undefined はそもそも指定でないとかじゃないでしょうか？
型を複数渡す時は配列だと動きそうですね

<template>
  <div>
    {{value}}
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  value: [String, Number]
})
</script>

Comments

[mikeko0901]

型を複数渡す方法を知りませんでした。ありがとうございます。

Answer 2

これが解決なのかがわかりませんが…
withDefaultsでデフォルト値を設定し、型をstringに変更したらwarnがなくなりました。

子コンポーネント修正後

<template>
    <div class="text-gray-800">
        <div>
            <h1 class="text-center text-xl font-semibold">{{event_name}}：{{event_type}}</h1>
        </div>
        <div class="text-sm mb-6 text-center">
            個別面接スタート日：
        </div>
    </div>
</template>

<script setup lang="ts">
import { datetimeFormatYmdhm } from '@/Tool/util'
import { withDefaults } from "vue"

type Props = {
    event_name: string,
    interview_date: string,
    event_type: string,
}

const props = withDefaults(defineProps<Props>(), {
    event_name: '',
    interview_date: '',
    event_type: '',
})

</script>