count0.org

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

01 March 2019 js TypeScript

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に怒られる。中年になると怒られることもなくなるので、たまには怒られてみるのもいいかも。

ご参考に