扩展全局声明

  1. 新建一个声明文件,如 a.d.ts
    declare global{
      interface Window{
         globalConfig:any
      }
    }
    export {};
    
  2. export {}, 必须有导出语句;这是因为全局对象扩充语句必须在模块或外部模块声明中使用,当添加了空导出语句后,该文件就成了一个模块。
  3. window对象的类型为Window而不是window,注意区分大小写;

定义全局接口

  1. 在如 b.ts 文件内
    interface Window{
      globalConfig:any
    }
    
  2. 这里新定义 Window 接口会和 TS 中原同名接口进行合并

这两个文件的核心功能是定义了 globalConfig 属性作为 Window 对象的一部分,并且都使用了 TypeScript 的声明合并机制。尽管它们看起来相似,但有一些关键的区别:

文件a:declare global 的使用

declare global {
  interface Window {
    globalConfig: any;
  }
}
export {};
  • 声明全局declare global 用于在全局作用域中声明或扩展类型。在这个文件中,Window 接口被扩展(或修改),增加了 globalConfig 属性。
  • 适用场景:这种方式常用于扩展全局对象(如 windowdocument 等)的类型定义。它的作用范围是在整个项目中,这意味着在任何地方都能识别 window.globalConfig,并且不需要在每个文件中显式地导入。
  • 文件导出export {} 语句的作用是将文件标记为模块,这样 declare global 才能生效。如果没有 export {},这会被认为是一个脚本文件,而非模块文件,declare global 可能无法按预期工作。

文件b:直接定义 Window 接口

interface Window {
  globalConfig: any;
}
  • 声明接口:这种方式直接声明了 Window 接口的扩展,通常这种方式适用于在 TypeScript 中修改全局对象的类型定义,但它要求该文件是一个模块,或者在全局作用域中合适地引用。

  • 作用范围:该代码片段只会影响文件内部或通过显式导入该接口的其他模块。如果没有导入或没有特别处理,它不会自动作用于全局作用域(如在浏览器中访问 window.globalConfig 时)。这意味着它不像 declare global 那样能够直接修改全局作用域的 Window 类型。

    主要区别

  1. 作用域

    • declare global 会修改全局 Window 接口,影响整个项目。
    • 直接声明 interface Window 只会修改当前模块中的 Window 类型,其他模块可能无法感知到这一变化。
  2. 文件用途

    • declare global 用于在声明文件(.d.ts)中扩展全局作用域类型。
    • 直接声明 interface Window 可能更常见于普通的 TypeScript 文件中。

总结

如果你需要在整个项目中修改 window 对象的类型并使其生效,那么使用 declare global 会更合适;如果只是希望在某个模块中修改 Window 类型,直接声明 interface Window 即可。