Typecript Custom Type cho JS lib, nhập không hoạt động

Question

Tôi có một dự án vue với typecript và tôi đang nhập một kiểu tùy chỉnh mà tôi tạo cho vue-number-filter , nhưng điều này tạo ra lỗi:

LỖI trong /Users/bmartins/Development/app-invest/src/main.ts(14,30): 14:30 Không thể tìm thấy tệp khai báo cho mô-đun 'vue-numberral-filter'. '/Users/bmartins/Development/app-invest/node_modules/vue-numeral-filter/dist/vue-numeral-filter.es.js' mặc nhiên có kiểu 'bất kỳ'. Hãy thử npm install @types/vue-numeral-filterxem nó có tồn tại không hoặc thêm tệp khai báo mới (.d.ts) có chứadeclare module 'vue-numeral-filter';

Trên tệp main.ts của tôi, tôi có:

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

Đối với kiểu tôi tạo cấu trúc thư mục:

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

Cấu trúc thư mục

Index.d.ts tôi đã tạo dựa trên @ loại / 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;

Và phần cuối cùng là thay đổi 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"
  ]
}

Tôi đã đọc bài đăng này TypeScript 2: các kiểu chữ tùy chỉnh cho mô-đun npm không được định kiểu , nhiều lần có lời giải thích đáng kinh ngạc nhưng vẫn không tìm ra cách khắc phục ...

Bất kỳ giúp đỡ?

Answer 1

Các tệp định nghĩa kiểu có thể hơi phức tạp trong Typecript. Rất dễ dàng để kết thúc việc viết một cái gì đó mà TypeScript hiểu là một mô-đun thay vì một tệp khai báo. Khi điều này xảy ra, TypeScript bắt đầu mong đợi bạn nhập các loại trực tiếp từ tệp, thay vì nhận dạng khai báo kiểu nhúng.

Đối với tôi, có vẻ như tệp định nghĩa loại của bạn không chính xác. Cụ thể, bạn đã có imports bên ngoài khai báo mô-đun, đây là một trong những cờ mà TypeScript công nhận là điểm đánh dấu mô-đun. Nếu bạn di chuyển chữ cái của mình importđể chúng ở bên trong declare { ... }khối, tôi nghĩ nó sẽ bắt đầu hoạt động.

Một lưu ý khác, tôi nghĩ rằng các mục typeRootsvà typesmục trong tsconfig.jsontệp của bạn quá hạn chế. Tôi không nghĩ đó là nguyên nhân gây ra sự cố ở đây, nhưng tôi nghĩ bạn nên xóa chúng nếu không bạn sẽ gặp khó khăn khi cài đặt các loại của bên thứ ba trong tương lai.