JS库的Typescript自定义类型，导入无效

编程问答 2022-06-12

问题描述

我有一个带有typescript的vue项目，并且正在导入一个我为vue-numeral-filter创建的自定义类型，但这会产生错误：

/Users/bmartins/Development/app-invest/src/main.ts(14,30）中的

错误： 14:30找不到模块'vue-numeral-filter'的声明文件。 “ /Users/bmartins/Development/app-invest/node_modules/vue-numeral-filter/dist/vue-numeral-filter.es.js”隐式具有“ any”类型。 尝试使用npm install @types/vue-numeral-filter（如果存在）或添加一个包含declare module 'vue-numeral-filter';的新声明（.d.ts）

在我的main.ts文件中：

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

对于类型，我创建文件夹结构：

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

Folder Structure

我基于@types/vue-moment创建的index.d.ts：

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;

最后一部分是更改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"
  ]
}

我读过这篇文章TypeScript 2: custom typings for untyped npm module，有几次令人惊讶的解释，但仍然不知道如何解决...

有帮助吗？

解决方法

类型定义文件在Typescript中可能有点挑剔。最终编写TypeScript解释为模块而不是声明文件的内容非常容易。发生这种情况时，TypeScript开始期望您直接从文件中导入类型，而不是识别嵌入式类型声明。

在我看来，您的类型定义文件不正确。特别是，您在模块声明之外有import，这是TypeScript识别为模块标记的标志之一。如果您将import移到declare { ... }块内，我认为它将开始工作。

另一方面，我认为您的typeRoots文件中的types和tsconfig.json条目限制过多。我不认为这是造成此问题的原因，但是我认为您应该删除它们，否则将来将无法安装第三方类型。

typestypescripttypescripttypescript2.0vue.js