如何在两个Vue文件中用TypeScript声明globalThis且互不污染？

核心需求 #

• TypeScript仅用于类型提示，不参与编译检查
• 优先使用globalThis而非window
• 为globalThis附加的类型需限定在单个Vue文件作用域内，避免不同Vue文件间的类型污染

原实现问题 #

直接使用declare global会扩展全局类型，导致多个Vue文件间的类型定义互相覆盖或冲突，无法实现单文件作用域隔离。

解决方案 #

通过局部类型断言的方式，在单个文件内为globalThis定义专属类型，不会污染全局作用域：

File1.vue

<script setup lang="ts">
// 定义当前文件专属的globalThis类型
type File1Global = typeof globalThis & {
  arrayOne: string[]
  arrayTwo: string[]
}

// 将globalThis断言为当前文件的专属类型
const global = globalThis as File1Global

// 使用时会有正确的类型提示，且不会影响其他文件
global.arrayOne = ['a', 'b']
global.arrayTwo = ['c', 'd']

// 未定义的arrayThree会提示类型错误，符合预期
// global.arrayThree = [] // 类型报错：类型“File1Global”上不存在属性“arrayThree”
</script>

<template></template>

File2.vue

<script setup lang="ts">
// 定义当前文件专属的globalThis类型
type File2Global = typeof globalThis & {
  arrayOne: number[]
  arrayThree: number[]
}

// 将globalThis断言为当前文件的专属类型
const global = globalThis as File2Global

// 使用时会有正确的类型提示，且不会影响其他文件
global.arrayOne = [1, 2]
global.arrayThree = [3, 4]

// 未定义的arrayTwo会提示类型错误，符合预期
// global.arrayTwo = [] // 类型报错：类型“File2Global”上不存在属性“arrayTwo”
</script>

<template></template>

说明 #

• 每个文件定义独立的FileXGlobal类型，仅在当前文件有效，不会与其他文件的类型定义冲突
• 通过as断言将globalThis转为局部类型，既保留了使用globalThis的习惯，又实现了单文件的类型隔离
• TypeScript仅提供类型提示，编译时断言不会产生额外代码，符合“仅做类型提示不参与编译检查”的需求

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