Typescript + Vue.jsで子コンポーネントのプロパティにアクセスする

投稿日：

Vue.js
Typescript

Typescript + Vue.jsの構成で親コンポーネントから子コンポーネントのプロパティにアクセスする場合、
普通のjavascriptと同じように実装するとエラーとなる場合があります。

例えば、以下のように記載するとします。

# template
<HogeChild ref="hogeChildRef" />

# script
import HogeChild from "〜対象ファイルパス〜";

@Component({
  components: {
    HogeChild
  }
})

export default class HogeParent extends Vue {
  changeChildFlg(): void {
    this.$refs.hogeChildRef.someFlg = true;
  }
}

すると以下のエラーが発生することがあります。

Property 'someFlg' does not exist on type 'Vue | Element | Vue[] | Element[]'.
  Property 'someFlg' does not exist on type 'Vue'.Vetur(2339)

この場合、Typescriptを使う場合は子コンポーネント呼び出し時にも型を指定してあげる必要があります。
子コンポーネント呼び出し部分を以下のようにすると動きます。

  changeChildFlg(): void {
    const hogeChildRef = <HogeChild>this.$refs.hogeChildRef;
    hogeChildRef.someFlg = true;
  }

どういう条件で発生するか、詳細は把握していませんが、
Typescript内にVue.jsを書くと問題ないけど、Vue.js内にTypescriptを書くとエラーになる気がします。