Nuxt×TypeScriptでfetch, asyncDataの引数に型を指定する

Composition APIの場合

※2020/10/05追記

Vue 3の新機能、Composition APIをNuxt向けに調整したパッケージ @nuxtjs/composition-api を使用する場合は明示的な型の指定が不要になりました。

import { defineComponent } from '@nuxtjs/composition-api';

export default defineComponent({
  name: 'SampleComponent',
  async asyncData(context): Promise<void> {
    const { app, store } = context;

    // プラグインにもアクセスできる！
    app.$plugin.run();

    // VuexにDispatchできる！
    await store.dispatch('user/checkAuth');
  }
});

Introduction - Nuxt Composition API

Nuxt 2.9 以降

Nuxt 2.9からTypeScriptが外部パッケージ化され、あたらしく@nuxt/typesが利用可能になりました。

@nuxt/typesは手動でのインストールは不要で2.9から追加された@nuxt/typescript-runtimeまたは@nuxt/typescript-buildをインストールすることで利用できるようになります。

あとは、@nuxt/typesが提供するContext型をcontextへ指定することで型安全にコーディングできるようになります。

import { Context } from '@nuxt/types';
import { Component, Vue } from 'nuxt-property-decorator';

@Component
export default class SampleComponent extends Vue {
  /** Lifecycle */
  async asyncData(context: Context): Promise<void> {
    const { app, store } = context;

    // プラグインにもアクセスできる！
    app.$plugin.run();

    // VuexにDispatchできる！
    await store.dispatch('user/checkAuth');
  }
}

Nuxt 2.8 以前

NuxtとTypeScriptを使う時、fetchとasyncDataの引数 context の型がなくて困った経験ありませんか？

Nuxtではコアパッケージの1つである@nuxt/vue-appというパッケージが context の型を提供しています。

import { Context } from '@nuxt/vue-app';
import { Component, Vue } from 'nuxt-property-decorator';

@Component
export default class SampleComponent extends Vue {
  /** Lifecycle */
  async asyncData(context: Context): Promise<void> {
    const { app, store } = context;

    // プラグインにもアクセスできる！
    app.$plugin.run();

    // VuexにDispatchできる！
    await store.dispatch('user/checkAuth');
  }
}

これで、context: anyや独自のインターフェースの定義が不要になります。

（ドキュメントのどこにも記載がないのはなぜなんだろうか・・・？）