TypeScript第三方模块声明文件缺失：如何声明及解决报错

我之前在Vue CLI 3.x的TypeScript项目里用vue-slider-component时，也碰到过完全一样的报错：

Could not find a declaration file for module 'vue-slider-component'. '/home/wahid/Development/tealvalley-app/node_modules/vue-slider-component/dist/index.js' implicitly has an 'any' type.

下面给你两种实用的解决思路，按需选择：

一、临时快速解决（适合快速推进开发） #

如果不想花时间写完整类型，直接在项目的src/shims-vue.d.ts文件里添加一行声明即可：

declare module 'vue-slider-component';

这行代码会告诉TypeScript把该模块视为any类型，瞬间就能消除报错，简单高效。

二、自定义规范类型声明（长期维护推荐） #

要是想给组件加上更严谨的类型约束，建议按照以下步骤来：

• 第一步：在项目根目录创建types文件夹（没有的话新建），然后在里面创建vue-slider-component子文件夹，再新建index.d.ts文件，最终路径是types/vue-slider-component/index.d.ts
• 第二步：在index.d.ts里编写适配组件的类型声明，举个基础示例（你可以根据组件实际的props、方法补充更多内容）：

import Vue from 'vue';

// 定义组件的类类型，对应组件的实例属性和方法
declare class VueSlider extends Vue {
  value?: number | number[];
  min?: number;
  max?: number;
  step?: number;
  // 比如组件支持的change事件，也可以在这里声明
  $emit(event: 'change', value: number | number[]): void;
}

// 导出模块类型
declare module 'vue-slider-component' {
  export default VueSlider;
}

• 第三步：检查tsconfig.json的typeRoots配置，确保包含我们自定义的types文件夹（Vue CLI生成的项目一般默认已配置，但可以确认一下）：

{
  "compilerOptions": {
    "typeRoots": [
      "./node_modules/@types",
      "./types"
    ]
  }
}

配置完成后，TypeScript就会优先识别我们自定义的类型声明，代码提示和类型校验也能正常工作了。

内容的提问来源于stack exchange，提问作者wrahim