Vue.js+TypeScript+Nuxt.js環境で、『Property 'XXX' does not exist on type 'CombinedVueInstance~'』を解消するためのtips

はじめに

Vue.js+TypeScript+Nuxt.js環境におけるScriptの書き方には下記の３種類があります。

• Vue.extend（OptionsAPI）
• defineComponent（CompositionAPI）
• vue-property-decorator（ClassAPI）

今回は、Vue.extend（OptionsAPI）を使用している場合の『Property 'XXX' does not exist on type 'CombinedVueInstance~'』というエラーを解消するためのtipsをまとめたものです。

しばしば遭遇するエラーだと思われますが、記事が少ないので取り急ぎまとめることにしました。
そのため、記事の内容については追加と修正を随時していきます。

どんな時に発生するか

Vue.js+TypeScriptでcomputed、watch、methodsなどを書いていて、TypeScriptの型推論が効かなくなった時に発生します。

解消方法

1. 返り値と引数の型を定義する
2. TypeScript標準の型で定義できない場合はInterface、Typeで定義する
3. 強制的にエラーをなくす

基本的には1と2で解決しますが、状況によっては3を使う場面があるかもしれませんので、参考までに入れておきます。

1.返り値と引数の型を定義する

methods: {
  someMethod (arg: number): number {
    return arg
  },
}

返り値については、TypeScriptの型推論が行われる仕様になっているのですが、今回のように型推論が効かずにエラーの原因になり得るということと、可読性の観点から定義しておくべきだと考えています。
引数はそもそも型推論が行われませんので定義しないと他のエラーにも引っ掛かります。

【 型定義の参考記事 】
https://qiita.com/is_ryo/items/6fc799ba4214db61d8ab

2.TypeScriptの標準の型で定義できない場合はinterface、typeで定義する

number、string、voidなどの標準の型では定義できない複雑なものに関しては、下記のようにtypeやinterfaceを使用することによって定義することができます。

export type Hoge = {
         name: string
         price: number
         ,,,,省略
       }

,,,,省略

methods: {
  someMethod (arg: Hoge): Hoge {
    return arg
  },
}

【 InterfaceとTypeの違いの参考記事 】
https://qiita.com/tkrkt/items/d01b96363e58a7df830e

3.強制的にエラーをなくす

本質的な解決ではありませんが、下記の2つのように書くと解消することができます。

computed: {
  ① return (this as any).hoge.method()

  ② // @ts-ignore
  return this.hoge.method()
}

①は(this as any)でany型にキャストすることができます。

②はts-ignoreによって次の行の型検査をスキップすることができます。

最後に

この他にも型定義関連のエラーは多々ありますので、随時投稿してまいります。
ナレッジを共有していって開発を効率化させましょう！