如何在TypeScript中使用函数修改全局变量的值？

问题场景 #

你已经有一段可以正常运行的JavaScript代码，通过函数成功修改了全局变量的值：

var name="Samir"; 
var status=true; 
function func1 () { 
  status=false; 
  name="sunny" 
} 
func1(); 
console.log(name); // 输出 "sunny"
console.log(status); // 输出 false

现在想知道在TypeScript里怎么实现完全一样的功能，下面我给你详细讲讲几种可行的方案。

解决方案 #

TypeScript是JavaScript的超集，核心逻辑和JS是相通的，但因为它有类型检查机制，所以在全局变量的处理上有一些细节需要注意，我整理了三种常见的实现方式：

1. 最贴近原JS代码的写法 #

直接在全局作用域声明变量，和你的JS代码几乎一致，只是可以加上类型注解让代码更严谨（当然不加也能运行，但TypeScript的优势就是类型校验嘛）：

// 用let替代var（TS更推荐let/const，避免var的作用域陷阱），加上类型注解
let name: string = "Samir"; 
let status: boolean = true; 

function func1(): void { 
  // 直接修改全局变量即可，TS会自动识别这些变量在全局作用域
  status = false; 
  name = "sunny";
} 

func1(); 
console.log(name); // 输出 "sunny"
console.log(status); // 输出 false

要是你坚持想用var也没问题，TS完全兼容，只是从代码规范角度不推荐而已。

2. 浏览器环境下显式挂载到window对象 #

在浏览器里，全局变量本质上都是window对象的属性，你可以显式把变量挂到window上，这种方式在团队项目里更清晰，不容易出现命名冲突：

// 先扩展Window接口，告诉TS我们要新增的全局属性，不然TS会报错说window上没有这个属性
interface Window {
  userName: string;
  userStatus: boolean;
}

// 把变量挂载到window上
window.userName = "Samir";
window.userStatus = true;

function func1(): void {
  window.userStatus = false;
  window.userName = "sunny";
}

func1();
console.log(window.userName); // 输出 "sunny"
console.log(window.userStatus); // 输出 false

这里我特意换了变量名，因为name和status是window的内置属性，直接覆盖可能会引发意外问题，用更明确的名字会更安全。

3. 大型项目推荐：用命名空间管理全局变量 #

如果是大型TS项目，直接使用全局变量容易造成作用域污染，推荐用命名空间把全局变量封装起来：

namespace GlobalVars {
  export let name: string = "Samir";
  export let status: boolean = true;
}

function func1(): void {
  GlobalVars.status = false;
  GlobalVars.name = "sunny";
}

func1();
console.log(GlobalVars.name); // 输出 "sunny"
console.log(GlobalVars.status); // 输出 false

这样既实现了全局可访问，又避免了和其他代码的命名冲突，后期维护起来也更方便。

几个关键注意点 #

• TS会严格检查类型，修改变量时要保证赋值的类型和声明的一致，比如不能给boolean类型的变量赋值字符串，否则会直接报错。
• 如果你的代码是在模块文件里（带有import/export语句的文件），直接声明的变量会被限定在模块作用域内，这时候需要用declare global来扩展全局作用域，才能实现真正的全局变量。

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