【Vue.js with TypeScript】propsでObjectを渡すときの型の指定方法

概要

propsで親componentから子componentにObjectを渡すときの型を、interfaceで指定する方法。

方法

type: Object as () => SampleType, のようにinterfaceを返すメソッドを指定する。

実装例

<template>
  <div id="sample-button">
    <button class="m-3 btn btn-sm btn-primary" @click="clickChildComponent">
      SampleButton
    </button>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import SampleType from "@/types/SampleType";

export default Vue.extend({
  name: "sample",
  props: {
    sample: {
      // SampleTypeというinterfaceをメソッドにして指定する
      type: Object as () => SampleType,
      required: true,
    }
  },
  methods: {
    clickChildComponent(): void {
      console.log(this.sample);
    }
  },
});
</script>

参考

• Using a Typescript interface or type as a prop type in VueJS
• Vue.jsでObject型のPropsにTypeScriptの型を割り当てる