問題

any

プロパティ 'hogeArr' は型 'CombinedVueInstance<Record<never, any> 
& { formatDate(date: Date, format?: string): string; min2hour(time: number): string; 
setScrollHint(message?: string): void; scrollPageTop(): void; clearErrorBar(): void; 
showErrorBar(errorMessage: any): void; showErrorBarWithScrollPageTop(errorMessage: any): void; 
apiErrorHandl...' に存在しません。ts(2339)

下記のコードでthis.hogeArrをhoverすると、上記のような型のエラーが表示されてしまった。


 data(): {
    hogeArr: string[]
  } {
    return {
      hogeArr: [],
    }
  },
  methods: {
    hoge(key: string): void {
      this.hogeArr.push('HAHAHA')
      this.$logger.info('hoge man is back!!:)')
    },
    hoge2(key: string): void {
      this.$logger.info('hoge2 man is back!!:)')
    },
},
computed: {
    hoge(key: string): void {
      return 'hoge man is back!!:)'
    },
    hoge2(key: string): void {
      return 'hoge2 man is back!!:)'
    },
}

みなさんも同じようにこのわけのわからない見覚えもない型定義した記憶もないエラーに遭遇をしたことはあるのではないか。
そして追記しただろう。邪悪な魔法「// @ts-ignore」を。

このエラーに対する先人たちの解決方法

このような記事もあって、anyや@ts-ignoreでエラーを無視したり(超非推奨だけど、この場合はもうそれでもいい気もしてしまう)、

下記のようにVueのすんごい深いところを書き換えたりする方法があるみたい

import Vue from 'vue'
import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'

interface DataType {
  someState: string
  ...
}

interface MethodType {
  someMethod(): void
  ...
}

// 使ってない場合は空でOK
interface ComputedType {}
interface PropType {}

export default Vue.extend({
} as ThisTypedComponentOptionsWithRecordProps<Vue, DataType, MethodType, ComputedType, PropType>)

「これをして、誰も読み解けないコードを量産するくらいなら最強の呪文「@ts-ignore」を使っちまおう」と思いましたね。
自分もそう思いました。しかし、他にも方法があったんですねー。

New!!解決方法

computedとmethodsの全ての戻り値に型定義をする・・・！！！

下記の素晴らしいコードのように、すべてのmethodsとcomputedの戻り値にvoidなり、stringなり、string[]なりを定義してあげると解決します。

これでもダメならひたすらつけれる個所全てに型定義をしてみてください、、、

methods: {
    hoge(key: string): void {
      this.$logger.info('hoge man is back!!:)')
    },
    hoge2(key: string): void {
      this.$logger.info('hoge2 man is back!!:)')
    },
},
computed: {
    hoge(key: string): void {
      return 'hoge man is back!!:)'
    },
    hoge2(key: string): void {
      return 'hoge2 man is back!!:)'
    },
}

参考

追記

他に何か方法ご存じの方いれば共有していただけると大変助かります👩🏼‍🤝‍🧑🏻