Working on a Vue project with TypeScript, I encountered an issue when importing a custom type created for the vue-numeral-filter package. The error message received is as follows:
ERROR in /Users/bmartins/Development/app-invest/src/main.ts(14,30): 14:30 Could not find a declaration file for module 'vue-numeral-filter'. '/Users/bmartins/Development/app-invest/node_modules/vue-numeral-filter/dist/vue-numeral-filter.es.js' implicitly has an 'any' type. Try
if it exists or add a new declaration (.d.ts) file containingnpm install @types/vue-numeral-filterdeclare module 'vue-numeral-filter';
In my main.ts file, the imports are as follows:
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,
});
For the custom type, I created a folder structure as follows:
App
|_ src
|_ types
|_ vue-numeral-filter
|_ index.d.ts
The index.d.ts file I created based on the @types/vue-moment looks like this:
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;
Finally, I made changes to the tsconfig.json file:
{
"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"
]
}
Despite reading this post TypeScript 2: custom typings for untyped npm module multiple times for guidance, I am still struggling to resolve the issue. Any assistance would be greatly appreciated.