TypeScriptを用いたNuxtにおいて，再帰的なコンポーネントを作ろうとすると,'default'の型情報が失われてしまう．

Question

前提・実現したいこと

TypeScriptを用いたNuxt.jsで，再帰的なコンポーネントを実現したい．

発生している問題・エラーメッセージ

'default'の型情報が失われてしまう．

'default' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

該当のソースコード

components/Test.vue

<template>
  <div class="Sample">
    <Test />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Test from '~/components/Test.vue'

export default Vue.extend({
  name: 'Test',
  components: {
    Test,
  },
})
</script>

試したこと

直接，コンポーネント自分自身を呼び出そうとするのではなく，間に別のコンポーネントを挟んだとしても，同じような問題が発生してしまいます．

補足情報（FW/ツールのバージョンなど）

package.json

{
  "name": "***************",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "npm run lint:js",
    "test": "jest"
  },
  "dependencies": {
    "@nuxt/typescript-runtime": "^2.0.0",
    "@nuxtjs/axios": "^5.12.2",
    "bootstrap": "^4.5.2",
    "bootstrap-vue": "^2.19.0",
    "core-js": "^3.6.5",
    "firebase": "^8.1.1",
    "nuxt": "^2.14.6",
    "nuxt-typed-vuex": "^0.1.22"
  },
  "devDependencies": {
    "@nuxt/types": "^2.14.6",
    "@nuxt/typescript-build": "^2.0.3",
    "@nuxtjs/eslint-config": "^3.1.0",
    "@nuxtjs/eslint-config-typescript": "^3.0.0",
    "@nuxtjs/eslint-module": "^2.0.0",
    "@types/jest": "^26.0.19",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.10.0",
    "eslint-config-prettier": "^6.12.0",
    "eslint-plugin-nuxt": "^1.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "jest": "^26.6.3",
    "prettier": "^2.1.2",
    "ts-jest": "^26.4.4"
  }
}

nuxt.config.js

export default {
  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    title: '***************',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    'nuxt-typed-vuex',
  ],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {},

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
    transpile: [/typed-vuex/],
  },
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types",
      "@types/jest"
    ]
  },
  "exclude": [
    "node_modules",
    ".nuxt",
    "dist"
  ]
}

Answer 1

まったく同じ問題に直面しまして、解決できたので回答します。
解決方法は 2 種類ありました。

方法 1

<template>
  <div class="Sample">
    <Test />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'Test'
})
</script>

方法 2

<template>
  <div class="Sample">
    <Test />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  beforeCreate() {
    (this as any).$options.components.Test = require('~/components/Test.vue').default;
  }
})
</script>

参考文献

1. 再帰的コンポーネント
2. コンポーネント間の循環参照