typescript - Hvordan inkludere .d.ts-fil manuelt (lokalt)? Eller hvordan bruke en brukerdefinert .d.ts-fil?

Jeg studerer nuxt.js, og av en eller annen grunn vil jeg utvide Vue-instansen slik:

import Vue from 'vue'

Vue.prototype.$myProp = 'test'

const app = new Vue()

console.log(app.$myProp)

Følger guiden på https://v2.vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins, har jeg opprettet en fil på types/test.d.ts med innholdet nedenfor:

declare module 'vue/types/vue' {
  interface Vue {
    $myProp: string;
  }
}

Men jeg vet ikke hvordan jeg får det til å fungere.

Jeg fikk feil i VSCode. Får også feil når jeg kjører tsc (Versjon 3.7.2):

index.ts:14:17 - error TS2339: Property '$test' does not exist on type 'CombinedVueInstance<Vue, object, object, object, Record<never, any>>'.

14 console.log(app.$test)

Jeg har prøvd å bruke en tsconfig.json i rotkatalogen, men det fungerer ikke:

{
    "compilerOptions": {
        "typeRoots": [
            "types/test.d.ts"
        ]
    }
}

Jeg har også prøvd å sette inn en referanse som dette, men det fungerer ikke:

///<reference path="types/test.d.ts"/>

Selvfølgelig, jeg vil ikke inkludere denne declare-filen i hver fil. Finnes det en måte å aktivere declare i hele prosjektet på?

Jeg vet ikke hvordan VSCode fungerer med TypeScript. Kanskje jeg bare gjør en feil i konfigurasjonsfilen.

Svar #1

typeRoots refererer til kataloger, ikke filer. I tillegg refererer det til den inneholdende mappen til typepakker.

En types-pakke er en mappe med en fil som heter index.d.ts eller en mappe med en package.json som har et types-felt. - typescriptlang.org

Vanligvis er dette ./node_modules/@types-mappen, som også er standardverdien for typeRoots-alternativet.

For ditt tilfelle er det bedre å bruke include-alternativet i stedet for typeRoots.

{
  "include": [
    "./types",
    /* other .ts or .d.ts source code containing folders here */
  ],
  "compilerOptions": { ... }
}

Relaterte artikler