Vue3.3の新機能とは？ ジェネリクスコンポーネントを中心にdefineSlots()などの新機能を解説【後編】

TypeScriptのサポートがアップデート！ Vue3.3の新機能まとめ　後編

defineSlots()とdefineOptions()

　ここからは、新機能リストで紹介していない6と7について、まとめて紹介します。

Slot Propsの型定義ができるdefineSlots()

　まず、新機能リスト6のdefineSlots()です。これは、スコープ付きSlotにおいて、Slot Propsの構成要素を定義できる仕組みです。例えば、リスト4のようなコンポーネントがあったとします。

リスト4：スコープ付きSlotを利用したコンポーネントの例

<script setup lang="ts">
  :
const memberInfo = reactive({  // (1)
	name: "田中太郎",
	state: "問題発生。"
});
const problemsInit: string[] = ["電話が通じません。", "留守です。"];  // (2)
const problems = ref(problemsInit);
</script>

<template>
  <section>
    <slot v-bind:memberName="memberInfo.name" v-bind:memberState="memberInfo.state">  // (3)
      <p>問題ありません</p>
    </slot>
    <slot name="detail" v-bind:memberProblems="problems">  // (4)
      <p>特にありません。</p>
    </slot>
  </section>
</template>

　リスト4の（3）のデフォルトSlotのSlot Propsは、memberNameとmemberStateであり、その値は（1）からもわかるように文字列です。一方、（4）のdetail SlotのSlot PropsはmemberProblemsのみであり、その値は（2）からわかるように文字列配列です。

　このようなスコープ付きSlotを定義する際、そのSlots Propsとして、どのような名称のどのようなデータ型が必要なのかを、これまで定義する方法がありませんでした。これを実現したのがdefineSlots()マクロです。リスト4のスクリプトブロックに、リスト5のようなコードを追記することで、Slot Propsが定義できます。

リスト5：defineSlots()によるSlots Propsの定義

type SlotsProps = {
  default?: (props: {memberName: string, memberState: string}) => any;
  detail?: (props: {memberProblems: string[]}) => any;
};
defineSlots<SlotsProps>();

　defineSlots()マクロのジェネリクスの型定義として記述するコードを構文としてまとめると、次のようになります。

構文：defineSlots()の型定義

type SlotsProps = {
  Slot名?: (props: {Slot Prop名: データ型, …}) => any;
  :
};
defineSlots<SlotsProps>();

　この定義により、もし定義以外のSlot Propsを記述すると、図3のようなエラー表示となります。

図3: 定義以外のSlot Propsを記述した際のエラー表示

オプション設定ができるdefineOptions()

　次に紹介するのは、新機能リスト7のdefineOptions()です。Vue.js本体のinheritAttrs属性を始めとして、外部モジュールなどが指定する属性によっては、Options API方式でなければ設定できないもの、つまり、script setupタグ内では設定できないものがあります。これらの設定が必要な場合は、これまでは、リスト6のように、scriptタグとscript setupタグの両方を記述する必要がありました。

リスト6：scriptタグとscript setupタグの両方を記述する必要がある場合のコード

<script>
export default {
  inheritAttrs: false
}
</script>
<script setup>
import {ref} from "vue";
  :
</script>

　このOptions APIでなければ設定できないオプションをscript setupタグ内で記述できるようにしたのが、defineOptions()マクロです。このdefineOptions()を利用すると、リスト6のコードは、リスト7のようなコードで済むようになります。

リスト7：defineOptions()でオプションを設定したコード

<script setup>
import {ref} from "vue";

defineOptions({
  inheritAttrs: false
});

  :
</script>