TypeScript 模块扩展

TypeScript 支持你"扩展现有模块的类型定义 ",这称为 模块扩展(Module Augmentation),常见于:

  • 为第三方库添加缺失的类型定义

  • 扩展现有模块的接口或类型

  • 使用 declare module 'xxx' 扩展模块内容

❗ 为什么要"放在模块中"?

如果你写了 declare module 'xxx' {...}:

  • ✅ 如果这个文件是一个模块(有 export {}),那么你写的东西是"扩展"原模块。
  • ❌ 如果这个文件是 script(无 import/export),那它就是"声明一个全新的模块",会覆盖原来的类型!

✅ 示例:正确扩展模块

typescript 复制代码
// example.d.ts
export {}; // 👈 让这个文件成为模块!

declare module 'vue' {
  interface ComponentCustomProperties {
    $trans: (key: string) => string;
  }
}

✅ 这样,TypeScript 会将你的扩展 合并 到 'vue' 原来的类型中。


❌ 示例:错误用法(会覆盖原模块)

typescript 复制代码
// example.d.ts
// ❌ 没有 export/import,这会变成全局 script

declare module 'vue' {
  interface ComponentCustomProperties {
    $trans: (key: string) => string;
  }
}

这样会导致 TypeScript 认为你声明的是整个模块的完整定义 ,原有类型就会被完全替换掉,造成类型错误或丢失。


✅ 总结一句话:

如果你想扩展 TypeScript 中的已有模块,记得把扩展代码放在一个模块文件里(至少写个 export {}),否则它就不是"扩展",而是"覆盖"了!

相关推荐
2301_32241428047 小时前
基于SpringBoot+Vue的休闲零食超市管理系统的设计与实现59004-计算机毕设 原创(免费领源码+部署教程+开发环境)
java·vue.js·spring boot·redis·mysql·决策树·推荐算法
酷炫码神13 小时前
Day 8|Vue3 响应式:告别手动操作 DOM,让数据驱动界面
javascript·vue.js·ecmascript
星光不问赶路人15 小时前
Vue 3 对象监听与快照:ref 和 reactive 的关键差异
前端·vue.js
ZoeLandia15 小时前
React6:组件通信
前端·react.js·typescript
稻草人47815 小时前
Vue3.0项目创建步骤
vue.js
Bug收容所15 小时前
Vue+js Day2
前端·javascript·vue.js
honkun617 小时前
vue 下拉树组件 vxe-table-select 实现分页多选
前端·javascript·vue.js
孟陬18 小时前
解决动态 import 类型 Any 痼癖
typescript·node.js·bun
ZoeLandia19 小时前
React03:useState 与不可变更新
前端·react.js·typescript·react
溪语流沙19 小时前
【Web全栈进阶】监控与告警:线上系统的“体检报告”
前端·vue.js·python·fastapi