TypeScript+Vue.jsの環境でnullableなpropsを指定する

TypeScript+Vue.jsの環境でVue.jsのコンポーネントでpropsを使っているときに、nullableなtype指定をどうやってやるかを説明します。

結論

Typescriptの方の型指定だけnullableであることを明示します。

title.vue

<template>
<h1>{{ title }}</h1>
</template>

<script lang="ts">
import { createComponent, SetupContext } from '@vue/composition-api'

export default createComponent({
    props: {
        title: {
            type: String as () => string | null,
            default: null
        }
    }
})
</script>

そもそもなのですが、Vue.jsのpropsはすべてnullableなので、nullableにするときに[String, null]というようにnullをpropsのtypeに書く必要はありません。

よって、TypeScript側にだけnullableだということを教えればよいです。