javascript - Ne može se izvesti Interface u Typescriptu - traženi modul ne pruža izvoz pod nazivom Settings

Pokušavam izvesti/uvoziti sučelje u Typescriptu, ali dobivam ovu pogrešku, nisam siguran što radim krivo

Nesatoshi SyntaxError: Zahtjevani modul '/src/types/settings.ts' ne pruža izvoz pod nazivom 'Settings'

U mom types/settings.ts imam ovo

export interface Settings {
    activeUser: number
}

I uvozim ga ovako

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

I ovdje je moj 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"]
}

Koristim Vue/Vite s Typescriptom

Odgovor #1

Najvjerojatnije problem uvoza sučelja bez njihovog izričitog označavanja kao tip. Vite zahtijeva da isolatedModules bude true, što zauzvrat zahtijeva rukovanje sučeljima na ovaj način:

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

Imajte na umu, ako koristite datoteke bačve (index.ts) koje izgledaju ovako:

export { IFoo } from './foo';

trebao bi ih pretvoriti da budu ovakvi umjesto:

export * from './foo';

ili ovako

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

Još jedna prljava opcija je postaviti skipLibCheck na true u tsconfig.json, što će ipak smanjiti vašu strogoću tipova.

Odgovor #2

Čudno je što npm run build radi bez problema, ali npm run dev baca SyntaxError.

Bio sam prisiljen koristiti import type { ..., što je posljedično također zahtijevalo isti pristup za Ref iz vue.

Zaobilazno rješenje objavljeno je na GitHubu za Vite problem 731

Povezani članci