Vue.extend() 使用時に data の中身を推論するには computed, methods あるいは props 定義が必要っぽい (2018 年 11 月時点)

Vue.extend() 使用時に data の中身を推論するには computed, methods あるいは props 定義が必要っぽい (2018 年 11 月時点):

Vue.extend() 使用時の data 推論には computed などの定義が必要っぽい

Type Vue without TypeScript の JSDoc による戻り値などの型指定をやっていたところ $data についてつまづいたので
Visual Studio Code により Vue CLI 3 や Nuxt.js 2 などで試しました。

Vue.extend() による $data の推論に必要と思われる options は・・・

computed と methods

Vue Forum の投稿の
Vue2.5 でthisが推論されない の computed のあたりを参考にしました。

data-inferred-by-computed-and-methods

<script> 
import Vue from 'vue'; 
export default Vue.extend({ 
  data() { 
    return { 
      name: 'taro', 
    }; 
  }, 
  // computed は中身が通常の関数、アロー関数どちらでも問題なし 
  // ただし定義をしない、あるいは空にすると $data 配下が any 扱いに 
  computed: { 
    [Symbol()]() { 
      return 0; 
    }, 
    // [Symbol()]: () => 0, 
  }, 
  mounted() { 
    // (property) name: string 
    this.name; 
  }, 
  // methods は空でも定義があればよく、 
  // 中身の定義をする場合でも通常の関数、アロー関数どちらでもよい 
  methods: { 
    test: () => 1, 
    exec() {}, 
  }, 
}); 
</script> 

props で default 定義にアロー関数が指定されているもの

data-inferred-by-props-arrow-function

<script> 
import Vue from 'vue'; 
export default Vue.extend({ 
  props: { 
    puroppu: { 
      type: Boolean, 
      default: () => false, 
      // アロー関数でないと $data 配下が any になるだけ 
      // default() { 
      //   return false; 
      // }, 
    }, 
  }, 
  data() { 
    return { 
      name: 'saburo', 
    }; 
  }, 
  mounted() { 
    // (property) ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>.name: string 
    this.name; 
  }, 
}); 
</script> 

踏み込んで調べてはいないですが props 配下にて default をアロー関数で指定したものが存在していると

コメントに記載したような (property) ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>.name: string という推論？が行われ

結果 string が取得できるようです。

かなり長い表示がされるので前述の computed methods のほうを使いたいと感じましたが

どうも props 配下に 1 つでも default にアロー関数を使用しているとこちらの方式が優先されるもようです。