Vue.jsでObject型のPropsにTypeScriptの型を割り当てる

この記事は古いしVue 2の解説である。賢明なる読者諸君はオフィシャルドキュメントを参照しよう。コードレビューで怒られても知らんぞ!!

Vue.jsのPropsはObjectを渡せるので、コンポーネントに情報の塊を渡すことができて便利。型指定すると以下のようになる。

const person = {
  first_name: 'Masami',
  last_name: 'Asai'
};

Vue.extend({
  name: 'personal-info',
  props: {
    person: {
      type: Object
    },
  },
});

<personal-info v-bind:person="person" />

👆のコードはTypeScriptでもObject型として通用する。しかし、Objectではanyすぎる。別途定義した型を使いたい。それでどう書くか。

interface Person {
  first_name: string;
  last_name: string;
}

Vue.extend({
  name: 'personal-info',
  props: {
    person: {
      type: Object as () => Person,
    },
  },
});

const person: Person = {
  first_name: 'Masami',
  last_name: 'Asai'
};

<personal-info v-bind:person="person" />

これでよし。ちがう型のObjectを渡すと当然TypeScriptに怒られる。中年になると怒られることもなくなるので、たまには怒られてみるのもいいかも。


追記

Vue.PropTypeを使おう。

interface Person {
  first_name: string;
  last_name: string;
}

Vue.extend({
  name: 'personal-info',
  props: {
    person: {
      type: Object as Vue.PropType<Person>,
    },
  },
});

const person: Person = {
  first_name: 'Masami',
  last_name: 'Asai'
};

ご参考に

一覧へ戻る