vue.js - Typescript anpassad typ för JS-bibliotek, import fungerar inte

Jag har ett Vue-projekt med TypeScript och jag importerar en egen typ som jag skapade för vue-numeral-filter, men detta genererar felet:

FEL i /Users/bmartins/Development/app-invest/src/main.ts(14,30): 14:30 Kunde inte hitta en deklarationsfil för modulen 'vue-numeral-filter'. '/Users/bmartins/Development/app-invest/node_modules/vue-numeral-filter/dist/vue-numeral-filter.es.js' har implicit typen 'any'. Försök npm install @types/vue-numeral-filter om den finns eller lägg till en ny deklarationsfil (.d.ts) som innehåller declare module 'vue-numeral-filter';

I min main.ts-fil har jag:

import Vue from 'vue';
import App from './App.vue';
import Vuetify from 'vuetify';
import vuetify from './plugins/vuetify';
import router from './router';
import VueApexCharts from 'vue-apexcharts';
import Vuex from 'vuex';
import store from './store';
import { mockStore } from './test/mock/store';
import * as moment from 'moment';
import 'moment/locale/pt-br';
import VueMoment from 'vue-moment';
import { API_URL, PRODUCT_TYPES } from './store/constants';
import VueNumeralFilter from 'vue-numeral-filter';

Vue.component('apexchart', VueApexCharts);

Vue.use(Vuetify);
Vue.use(Vuex);
Vue.use(VueNumeralFilter, { locale: 'pt-br' });
Vue.use(VueMoment, {
  moment,
});

För typen skapar jag mappstrukturen:

App 
|_ src 
|_ types    
   |_ vue-numeral-filter
        |_ index.d.ts

Mappstruktur

index.d.ts som jag skapade baserat på @types/vue-moment:

import Numeral from 'numeral';
import { PluginObject } from 'vue';

declare namespace VueNumeralFilterPlugin {
  interface Options {
    // The optional (self-maintained) numeral instance
    numeral?: Numeral;
  }
  interface VueStatic extends Numeral {
    (inp?: Numeral, format?: string): string;
    (inp?: Numeral): string;
  }
}

declare module 'vue-numeral-filter' {
  interface Vue {
    $numeral: VueNumeralFilterPlugin.VueStatic;
  }
}

type VueNumeralFilter = PluginObject<undefined>;

declare const VueNumeralFilter: VueNumeralFilter;
export = VueNumeralFilter;

Och den sista delen var att ändra tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "typeRoots": [
      "./types"
    ],
    "types": [
      "webpack-env",
      "vue-numeral-filter",
      "vuetify-form-base"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Jag läste det här inlägget TypeScript 2: custom typings för untyped npm module flera gånger som har en fantastisk förklaring men förstod ändå inte hur man fixar det...

Någon hjälp?

Svar #1

Typdefinitionsfiler kan vara lite knepiga i Typescript. Det är väldigt lätt att skriva något som TypeScript tolkar som en modul istället för en deklarationsfil. När detta händer börjar TypeScript förvänta sig att du importerar typer från filen direkt, istället för att känna igen den inbäddade typdeklarationen.

Det verkar för mig som att din typdefinitionsfil är felaktig. Speciellt har du import-satser utanför moduldeklarationen, vilket är en av de flaggor som TypeScript känner igen som en modulmarkör. Om du flyttar dina import-satser så att de är inne i declare { ... }-blocket, tror jag att det kommer att börja fungera.

På ett annat ämne, jag tror att typeRoots och types-poster i din tsconfig.json-fil är alltför begränsande. Jag tror inte att det är det som orsakar problemet här, men jag tycker att du borde ta bort dem annars kommer du att få problem med att installera tredjepartstyper i framtiden.