Question

我有一个带有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，有几次令人惊讶的解释，但仍然不知道如何解决...

有帮助吗？

Answer 1

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

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

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

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

1 个答案: