Typescript Custom Type per JS lib, importazione non funzionante

Ho un progetto vue con dattiloscritto e sto importando un tipo personalizzato che creo per il filtro vue-numeral , ma questo genera l'errore:

ERRORE in /Users/bmartins/Development/app-invest/src/main.ts(14,30): 14:30 Impossibile trovare un file di dichiarazione per il modulo 'vue-numeral-filter'. "/Users/bmartins/Development/app-invest/node_modules/vue-numeral-filter/dist/vue-numeral-filter.es.js" ha implicitamente un tipo "any". Prova npm install @types/vue-numeral-filterse esiste o aggiungi un nuovo file di dichiarazione (.d.ts) contenentedeclare module 'vue-numeral-filter';

Sul mio file main.ts ho:

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,
});

Per il tipo creo la struttura delle cartelle:

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

Struttura delle cartelle

L'indice.d.ts che ho creato in base ai @ 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;

E l'ultima parte stava cambiando il 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"
  ]
}

Ho letto questo post TypeScript 2: digitazioni personalizzate per il modulo npm non tipizzato , più volte che ha una spiegazione sorprendente ma non ho ancora capito come risolverlo ...

Qualsiasi aiuto?

I file di definizione del tipo possono essere un po 'complicati in Typescript. È molto facile finire per scrivere qualcosa che TypeScript interpreta come un modulo invece di un file di dichiarazione. Quando ciò accade, TypeScript inizia a aspettarsi che importi i tipi direttamente dal file, invece di riconoscere la dichiarazione del tipo incorporata.

Mi sembra che il tuo file di definizione del tipo non sia corretto. In particolare, hai messaggi importfuori dalla dichiarazione del modulo, che è uno dei flag che TypeScript riconosce come un marcatore del modulo. Se sposti i tuoi messaggi in importmodo che siano all'interno del declare { ... }blocco, penso che inizierà a funzionare.

In una nota diversa, penso che le voci typeRootse typesnel tuo tsconfig.jsonfile siano eccessivamente restrittive. Non penso che sia questa la causa del problema qui, ma penso che dovresti rimuoverli altrimenti avrai problemi con l'installazione di tipi di terze parti in futuro.