如何为相对路径引入的Vue组件声明any类型并让TS正确识别？

错误原因 #

1. 手动创建的Component.d.ts未被TypeScript纳入编译输出流程，大概率是tsconfig.json的include配置未覆盖到该文件，或是声明文件的模块写法不符合TypeScript的模块解析规则。
2. 直接写const m:any;export default m;的写法虽语法合法，但未明确绑定到目标模块路径，导致TypeScript无法关联到import Component from './Component'的导入语句。

正确解决方案 #

方案一：针对Vue组件的模块声明（推荐） #

如果Component是.vue文件，在src/pkg目录下修改Component.d.ts为明确的模块声明：

declare module './Component' {
  const Component: any;
  export default Component;
}

要是你的导入语句写了.vue后缀（比如import Component from './Component.vue'），就把模块名改成'./Component.vue'。

方案二：调整tsconfig确保声明文件被输出 #

检查并修改tsconfig.json的关键配置：

1. 开启声明文件生成并指定输出目录：

{
  "compilerOptions": {
    "declaration": true,
    "declarationDir": "./types",
    // 保留其他原有配置
  },
  "include": [
    "src/**/*" // 确保覆盖src下所有文件，包括.d.ts
  ],
  "exclude": [
    // 不要把.d.ts文件加入排除列表
  ]
}

2. 重新执行tsc，此时Component.d.ts会被输出到types/pkg目录下，和index.d.ts的路径结构保持一致，TypeScript就能正确解析模块引用。

验证步骤 #

执行tsc后，检查types/pkg目录下是否存在Component.d.ts，若存在，再查看types/index.d.ts中的导入语句，报错应该会消失。

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