Vue2でTypeScriptを利用したpropsの書き方

Question

Vue2、TypeScriptを利用したpropsの書き方

親から渡されるデータが以下の通りオブジェクトの場合

{
      memberList: [
        { id: 1, name: "taro" },
        { id: 2, name: "hanako" },
        { id: 3, name: "takashi" },
      ]
      省略…
};

子のコンポーネントで「Object is of type 'unknown'.Vetur(2571)」の警告が出るため、
propsはどのように書くべきなのかを知りたい

# テンプレート
<template v-for="(member) in memberList" :key="member.id">
  <p>{{member.name}}</p>
</template>

# script
<script lang="ts">
export default Vue.extend({
  props: {
    memberList: {
      type: Array,
      required: true
    }
  },

Answer 1

PropType を使用することで型を補完することができます。

import Vue, { PropType } from 'vue';

export default Vue.extend({
  props: {
    memberList: {
      type: Array as PropType<{ id: number, name: string }[]>,
      required: true
    }
  }
}

公式サイトのこちらをご覧ください。