TypeScriptを使ったNuxt.jsで、ajaxで取得したコンテンツの一部分を利用しようとすると`does not exist on type '{}'`エラーが出る

Question

Nuxt.js with TypeScript を初めて使ってみました。
モジュール nuxt/content(https://content.nuxtjs.org/)からコンテンツを引っ張ってきて、
その中の一部をとりだして加工したく、下記のようなコードを書きました。

引っ張ってきたデータのhogeHogeにあたる部分はテキストが入っています。

export default Vue.extend({
  data () {
    return {
      info: {},
      hoge: ''
    }
  },
  async fetch() {
    this.info = await this.$content('infomation/' + this.$route.params.slug).fetch()
    this.hoge = this.info.hogeHoge
  }
})

このコードではthis.hoge= this.info.hogeHogeのhogeHoge部分で下記エラーが表示されます。

TS2339: Property 'hogeHoge' does not exist on type '{}'.

エラーの意図するものと解決策がわからず。。。
取得してきたものの中味も型付けしないといけない。。。？？
hogeHogeっていう型なんてない。。。。。。？？
this.infoの中身をあらかじめめすべて型付けないといけない。。？？

初歩的な質問で申し訳ないのですが、どう処理したらよいのでしょう？

Answer 1

this.infoの中身をあらかじめめすべて型付けないといけない。。？？

その通りです．

コンパイルエラーを解決するにはローカルステートの宣言である data 関数の戻り値の型定義をします．
その際， this.$content('infomation/' + this.$route.params.slug).fetch() の戻り値の型も定義する必要があります．

引っ張ってきたデータのhogeHogeにあたる部分はテキストが入っています。

とのことでしたのでこんなイメージでしょうか．
（尚，info の初期値は {} より undefined の方が fetch 関数の実装が簡潔になるので undefined にしました）

type State = {
  // 初期値 or fetch 後の状態を表す型
  info: undefined | { hogeHoge: string; /* 他にもプロパティがある場合は適宜追加 */ };
  hoge: string;
}

あとはこの定義した型を data 関数の戻り値として型をつけてあげればコンパイルエラーはなくなると思います．

export default Vue.extend({
  data (): State { // 定義した型をつける
    return {
      info: undefined,
      hoge: ''
    }
  },
  async fetch() {
    this.info = await this.$content('infomation/' + this.$route.params.slug).fetch()
    // this.info は undefined か { hogeHoge: string } 型なので
    // undefined ではないかをチェックする文を書かないで this.hoge に代入しようとするとコンパイルエラーになります
    if (this.info) {
      this.hoge = this.info.hogeHoge
    }
  }
});

Comments

[nieve]

ありがとうございます！
回答いただくのと入れ違いで、下記を書いて解決していたのですが、
いただいた内容、TypeScriptの型定義やその適応方法の勉強になります！
こうやって適応させるのですね～～

```
export default Vue.extend({
data () {
return {
info: {
hogeHoge: ''
},
hoge: ''
}
},
async fetch() {
this.info = await this.$content('infomation/' + this.$route.params.slug).fetch();
this.hoge= this.info.hogeHoge
}
})
```