ウェブサイト検索

javascript - TypeScriptでインターフェースをエクスポートできません - 要求されたモジュールはSettingsという名前のエクスポートを提供していません

私はTypescriptでインターフェースをエクスポート/インポートしようとしていますが、このエラーが発生しており、何を間違えているのかわかりません

キャッチされていない SyntaxError: 要求されたモジュール '/src/types/settings.ts' は 'Settings' という名前のエクスポートを提供していません

私の types/settings.ts にはこれがあります

export interface Settings {
    activeUser: number
}

そして私はこのようにそれをインポートします

import { Settings } from '@/types/settings'

そして、こちらが私のtsconfig.jsonです

{
  "compilerOptions": {
    "target": "esnext",
    "baseUrl": "./src/",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "paths": {
      "@/*": ["src/*"],
    },
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "isolatedModules": false
  },

  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

私はTypeScriptでVue/Viteを使用しています

回答 #1

ほとんどの場合、インターフェースを型として明示的にマークせずにインポートしていることが問題です。ViteはisolatedModulesをtrueにすることを要求しており、それによりインターフェースをこのように扱う必要があります:

interface IFoo { bar: string; }
export type { IFoo };

次のようなバレルファイル（index.ts）を使用している場合、覚えておいてください:

export { IFoo } from './foo';

代わりにこれのように変換すべきです：

export * from './foo';

あるいはこんなふうに

import type { IFoo } from "./foo";
export type { IFoo };

もう一つの汚い方法は、tsconfig.jsonでskipLibCheckをtrueに設定することで、これによって型の厳密さは下がります。

回答 #2

npm run buildは問題なく動作するのに、npm run devではSyntaxErrorが発生するのは奇妙です。

私は import type { ... を使用することを強いられ、その結果 vue からの Ref にも同じ対応が必要になりました。

Viteの問題731に対する回避策がGitHubに投稿されました

関連記事