ecmascript 6 - Hur tillhandahåller jag TypeScript-definitioner för URI-importer till TSC?

import Vue from 'https://cdn.jsdelivr.net/npm/[email /dist/vue.esm.js'

Om jag ber TSC att kompilera ovanstående klagar den (med rätta) över att inte kunna hitta definitioner för den modulen. Jag kan dock inte lista ut hur jag ska ge TypeScript definitionsfilen. declare module 'https://cdn.jsdelivr.net/npm/[email /dist/vue.esm.js' { ... } fungerar inte, och https://cdn.jsdelivr.net/npm/[email /dist/vue.esm.js är inte ett giltigt filnamn så jag kan inte skapa en fil med det namnet. Jag försökte använda tsconfig.json paths, men kunde inte få det att fungera heller.

Vilken magi krävs för att få TypeScript att acceptera mina Vue-typdefinitioner?

Obs: En idealisk lösning skulle fungera med //cdn.jsdelivr.net/npm/[email /dist/vue.esm.js och ./vue.esm.js och ./vue.js också. De två senare är relativa sökvägar som jag inte kan lista ut hur jag ska tillhandahålla en definitionssökväg för.

Svar #1

Det du frågar efter är detta:

stubs.d.ts

declare module 'https://cdn.jsdelivr.net/npm/[email /dist/vue.esm.js' {
  const Vue: typeof import ('vue');

  export default Vue;
}

Men att använda ett importuttryck för att ladda ett modul från ett CDN är inte ett idiomatiskt sätt att använda moduler — och ingen bundlare stöder det, åtminstone inte vad jag vet.

Om du vill använda Vue som en modul bör det installeras lokalt (npm install vue) och sedan importeras från din lokala node_modules-katalog.

import Vue from 'vue';

Om du vill använda det som ett UMD-paket (det vill säga, få webbläsaren att ladda ner det från en CDN istället för från ditt paket), då behöver du installera typningarna och inkludera dem i ditt projekt.

Vue placerar sina deklarationsfiler (*.d.ts) bredvid den faktiska körbara koden, så du kan inte bara installera typer. Du behöver ändå ladda ner hela paketet.

npm install vue

Lägg till de installerade typdefinitionerna till ditt projekt. I din tsconfig.json, se till att "vue" är inkluderat i compilerOptions.types.

{
  "compilerOptions": {
    "types": ["vue"]
  }
}

Detta kommer att exponera typerna globalt inom dina skript.