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;
},
});
tamuraryoya.icon Mixinの型推論を実装したPull Request (未マージ)
onuma.icon 凄い、頑張ろうとしているんだ・・・!ちょっとみたけどなかなかの型設定ですね。。。
refにコンポーネントを指定できない
Vue.extendで作られたものはインスタンス化されたものなので、型にはできない。
classで作られたものはできる。
と思っていましたが、 InstanceType<typeof ~>でできました
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;
};
}
tj.icon React 場合、ref のtype をスキップする // @ts-ignore
理由は 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の型チェックは現状vue-type-checkを使う。
templateのparseの現状
vue-eslint-parserがpugを諦めているのがでかい。
これによって周辺ツールもpugを諦めているため、htmlに移行しているケースが多い。
だからと言って現状はhtmlにしてもそこまで恩恵は大きくないと思っている。
型チェックはまだ不完全
vue-i18nのeslintも不完全
この辺が充実してきたら話は変わってくるとは思う。(特に型チェック)
tj.icon computed は推論できない
onuma.icon
Vue の宣言ファイルは循環的な性質を持つため、TypeScript は特定のメソッドの型を推論するのが困難な場合があります。この理由のため、render や computed のメソッドに戻り値の型のアノテーションを付ける必要があるかもしれません。
このぼかし発言のせいでできそうな気もしつつ、結局できないっていう悲しい結論に陥りました。。。
Vue 3 cheat sheet
tj.icon Vue の型について、Vue 3を待ち方がいいですね。Options API 忘れて、Composite API に移動する方がいいですね。
onuma.icon Composition APIは$routerとか、$~系が軒並み使えなくなると言う大きな変更があるので、落ち着いてからの方がいいかなと個人的には感じていますね。
Compositionの具体的な話はこっちでしましょう。