Can I limit TypeScript's globalThis declarations to a single Vue file?

When you use a global augmentation (e.g. via a top-level or module–level "declare global"), the types you add are merged into the global scope for the entire project. In other words, the compiler treats those declarations as global, so even if you add them in a single file, they will be visible (and have an effect) in every file that references the global.

For your specific example, TypeScript will merge the declarations:

• In File1.vue you declared:

  TSCopied
  declare global {
    var arrayOne: string[]
    var arrayTwo: string[]
  }

• In File2.vue you declared:

  TSCopied
  declare global {
    var arrayOne: number[]
    var arrayThree: number[]
  }

Because these augmentations happen in the global scope, they conflict. There isn’t a mechanism in TypeScript to limit an augmentation of globalThis (or any global declaration) to a single file only.

Alternatives

If you need file-specific types without affecting the entire globalThis, consider one of the following approaches:

1. Use a local alias: Instead of augmenting globalThis, define a local variable or type alias that you use only in the file. For example:

   TSCopied
   // File1.vue
   interface ArrayTypes {
     arrayOne: string[]
     arrayTwo: string[]
   }
   
   const myGlobal = globalThis as unknown as ArrayTypes

2. Wrap types in a namespace: If the library or your code has a global variable (like a specific namespace), extend only that namespace instead of the entire globalThis. This follows common best practices and minimizes potential conflicts.

Remember that even when using these strategies, if you actually add properties to globalThis at runtime, that state is globally shared (even though the types might be confined to a file).

Conclusion

It is not possible to attach types to globalThis in a way that is scoped to only one file. Global augmentations in TypeScript are merged project-wide.