同名.ts文件存在时,声明文件导出类型无法被识别的问题咨询
TypeScript中.ts与同名.d.ts文件的导入规则解析
你遇到的问题核心是TypeScript对模块导入的匹配逻辑:当同一目录下存在同名的.ts(实现文件)和.d.ts(声明文件)时,导入./utils会优先指向.ts文件,而非自动合并两者的导出内容。
逐个分析你的测试情况:
- 情况1:
import { fun1 } from "./utils"正常运行
因为./utils匹配到的是utils.ts,它导出了fun1,所以能正常导入。 - 情况2:
import { name } from "./utils.d"正常运行
这里明确指定了导入声明文件utils.d.ts,自然能拿到里面定义的类型。 - 情况3:
import { name } from "./utils"提示未导出
此时导入指向的是utils.ts,但utils.ts里并没有导出name、age或fun这些类型,所以报错。 - 情况4:删除
utils.ts后导入正常
没有了.ts实现文件,TypeScript会自动匹配同名的.d.ts文件,所以能导入name。
如何实现从./utils同时导入类型和实现?
如果想让./utils导出utils.ts的实现和utils.d.ts的类型,有两种常用方式:
方式1:在utils.ts中重新导出类型
直接在实现文件里导入.d.ts的类型并重新导出,这样导入./utils就能拿到所有内容:
// utils.ts import { fun, name, age } from "./utils.d"; export { fun, name, age }; // 重新导出声明文件中的类型 export const fun1: fun = (d1, d2) => { console.log(d1, d2); return d1; };
之后就能像你预期的那样导入:
import { fun1, fun, name, age } from "./utils";
方式2:将.d.ts改为模块扩展声明(不推荐用于自有代码)
如果非要用.d.ts给.ts文件补充类型,可以把声明文件改成模块扩展的形式,但这种方式需要手动同步类型和实现,维护成本高:
// utils.d.ts declare module "./utils" { export type name = string; export type age = number; export type fun = (p1: name, p2: age) => name; export const fun1: fun; }
额外建议
对于自己编写的TypeScript代码,优先在.ts文件中直接定义并导出类型,不需要单独拆分.d.ts。.d.ts更多用于给JavaScript代码提供类型声明,或者在一些大型项目中做类型的独立拆分维护。
内容的提问来源于stack exchange,提问作者Tony shen
相关产品推荐
相关产品推荐

