TypeScript 環境で Vue.js 2.x を使う時にハマったところを書いていく

自分用。都度追記していきたい。

data に型を持たせる

typescript
1import Vue from 'vue'
2
3type Data = {
4	title: string,
5	description: string,
6	fruits: {
7		name: string,
8		price: number
9	}[]
10}
11
12export default Vue.extend({
13	name: 'FreshFruitsListPage',
14	data: (): Data => {
15		return {
16			title: 'Fresh fruits!',
17			description: 'What is the most fresh fruit on this season?',
18			fruits: [
19				{name: 'Water meron', price: 1000 },
20				{name: 'Kiwifruit', price: 500 },
21				{name: 'Loquat', price: 300 },
22			]
23		}
24	},
25	methods: {
26		showSomething() {
27			console.log(this.fruits[0].name)
28		}
29	}
30})
31

props に型を持たせる

2.5以降では propsに String , Number などの型がつけられる。 Array 、 Object は any[] any になってしまう。( Vue + TypeScriptでpropsのObjectやArrayに型をつける より)

その場合の解決方法。型キャストが使える。

とてもとても乱暴に書くと {Vue.js の型} as PropType<{TypeScriptの型}>

typescript
1import Vue, { PropType } from 'vue'
2
3interface Fruits {
4	name: string
5	price: number
6}
7
8export default Vue.extend({
9	name: 'FruitPage',
10	props: {
11		title: {
12			type: String as PropType<string>,
13			default: ""
14		},
15		Fruits: {
16			type: Object as PropType<Fruits>
17		}
18	}
19})
20

自身の値や関数を this で参照できない。エディタに怒られる。

慣れてないと意外に見落としがちだが、ちゃんとVue.extends() を使っているか確認。

$emit とかでエラーが表示される際も同様。

参考

• Vue + TypeScriptでpropsのObjectやArrayに型をつける