謎

Web

Nuxt3でpluginsのファイルを呼び出すとtsエラーになる

Nuxt3でpluginsにあるファイルから呼び出した際、ファイルがunkown型になるというtsエラーが出て、解決できずに試行錯誤したので、メモ。結果的にはエラーは出ないけど、解決していないような一時しのぎのような状態です。

Copilotからの提案

tsエラーをどうしたものか尋ねると、公式サイトにある以下の定義をするべきとのこと。早速、index.d.tsを作って、記述しました。

plugins/ · Nuxt Directory Structure
Nuxt has a plugins system to use Vue plugins and more at the…
Nuxt

interface NuxtAppとinterface ComponentCustomPropertiesは両方同じ内容を記述した方が良いらしいんですが、使っている場所で分けたかったので、以下のような記述にしています。interface ComponentCustomPropertiesは<template></template>の中で記述する際に使用するみたいで、ここで使った$filterはこれでエラーを解消できました。interface NuxtAppは<script></script>内で使用するそうですが、ここで定義してもエラーは解消できません。なんでだろう？？

import type { JsonArray } from '~/types/jsonarray';

declare module '#app' {
  interface NuxtApp {
    $getTypes(jsonData: JsonArray[]): { [key: string]: number }
    $getGenerations(jsonData: JsonArray[]): { [key: string]: number }
    $getPlaces(jsonData: JsonArray[]): { [key: string]: number }
    $getSex(jsonData: JsonArray[]): number
  }
}

declare module 'vue' {
  interface ComponentCustomProperties {
    $filter(val: number): number
  }
}

export {}

人力検索で可能性を見つける

仕方ないので検索して探すと、ちょうど当てはまりそうな事例がありました。以下には何通りかの解決方法があり、それぞれ試してみることに。

useNuxtApp() helper returns type unknown · Issue #20390 · nuxt/nuxt
Environment Operating System: Darwin Node Version: v18.0.0 N…
GitHub

結果的に私の場合は、tsconfig.jsonのcompilerOptionsからbaseUrl、paths、typesをコメントアウトするとtsエラーを返すことはなくなりました。ただ、うまく設定していれば、エラーは出ないはずなので、このあたりの設定をどうするかの謎が残っています。ちなみ、現在の設定は以下です。

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "compilerOptions": {
    // "baseUrl": ".",
    "lib": ["dom", "esnext"],
    // "paths": {
    //   "~/*": [
    //     "*",
    //     "./src/*"
    //   ],
    //   "@/*": ["./src/*"]
    // },
    "sourceMap": true,
    "strict": true,
    "traceResolution": true,
    // "types": ["vitest/globals"]
  },
  "extends": "./.nuxt/tsconfig.json",
}

コメント