Vue.jsでObject型のPropsにTypeScriptの型を割り当てる
公開日 2019-03-01
この記事は古いし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'
};