Vue.jsの型推論

Options APIの推論の流れをまとめたので、その辺の話をします。

vue-property-decoratorを含めた型推論のサンプルコード

Options APIの型推論

$data, $propsはanyになってしまう

mixinの型チェックができない

mixinの中身まで推論させるのはほぼ不可能。

ただしextendを繰り返してmixinと同等のことはできる。

code:typescript

const ins1 = Vue.extend({

data() {

return {

a: 10,

};

},

});

const ins2 = ins1.extend({

data() {

return {

b: 'aaa'

};

},

created() {

this.a;

},

});

refにコンポーネントを指定できない

classで作られたものはできる。

code:typescript

import Vue from 'vue';

import { Component } from 'vue-property-decorator';

import OptionsComponent from './OptionsComponent.vue';

import ClassComponent from './ClassComponent.vue';

@Component

export default class ClassPage extends Vue {

$refs: {

refOptions: InstanceType<typeof OptionsComponent>;

refClass: ClassComponent;

};

}

理由は　ref は HTML native DOM に指すから。

code:ref usage

<button click="this.refs.fileRef.focus" />

<input hidden type="file" ref="fileRef" />

template上での型チェック

以下の設定をするとhtmlの時だけ型チェックをしてくれる。

ただしVSCode上だけなので、コンパイルエラーにはならない。

code:settings.json

{

// html内でvueの変数をチェックする

"vetur.experimental.templateInterpolationService": true

}

templateのparseの現状

vue-eslint-parserがpugを諦めているのがでかい。

これによって周辺ツールもpugを諦めているため、htmlに移行しているケースが多い。

だからと言って現状はhtmlにしてもそこまで恩恵は大きくないと思っている。

型チェックはまだ不完全

vue-i18nのeslintも不完全

この辺が充実してきたら話は変わってくるとは思う。（特に型チェック）

onuma.icon

このぼかし発言のせいでできそうな気もしつつ、結局できないっていう悲しい結論に陥りました。。。

Vue 3 cheat sheet

Compositionの具体的な話はこっちでしましょう。