TypeScript 4.5.5+Vue3中导入自定义接口提示TS2306文件非模块的原因与解决办法

报错原因 #

这个TS2306错误的核心原因是你的MessageType.ts文件没有被TypeScript识别为模块。在TypeScript的规则里，只有包含export或import语句的文件才会被当作模块处理；如果一个文件里只有类型定义但没有导出语句，它会被视为全局脚本，无法通过import语法引入其中的内容。你当前的MessageType接口只是在文件里定义了，但没有对外导出，所以TypeScript不认它是可导入的模块。

另外提个小细节：你接口里写的type: String是大写的构造函数类型，TypeScript里更推荐使用小写的string基础类型，这是符合TS类型规范的写法哦。

解决步骤 #

1. 修改接口文件，导出接口
   打开MessageType.ts，给接口加上export关键字，把它变成模块的可导出成员：

   export interface MessageType {
     type: string;
     data: any;
   }
   

2. 保持原导入语句即可
   你在Vue组件里的导入写法是没问题的，因为已经用了import type来专门导入类型，符合Vue 3 + TypeScript的最佳实践：

   import type { MessageType } from "@/model/message/MessageType";
   

做完这两步，重新编译项目，这个报错应该就消失啦。

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