TypeScript中如何声明可能不存在的变量？Angular跨浏览器报错

好的，我来分别解答你的两个问题：

在TypeScript里处理这类“可能不存在的全局变量”，有几种实用的方式：

• 先声明，再用typeof检查：首先用declare var声明变量的类型（可以是具体类型、any或者联合undefined），然后在使用前通过typeof判断变量是否存在——这是最安全的方式，因为直接访问未定义的变量会抛出ReferenceError，但typeof不会。
  示例：

  // 声明全局变量，类型设为可能的类型 | undefined
  declare var myOptionalVar: string | undefined;
  
  // 使用前安全检查
  if (typeof myOptionalVar !== 'undefined') {
    console.log(myOptionalVar.toUpperCase());
  }
  

• 使用全局接口扩展（浏览器环境）：如果是浏览器自带的可能不存在的API，你也可以扩展全局Window接口，让变量成为可选属性：

  interface Window {
    myOptionalVar?: string;
  }
  
  // 使用时同样用typeof检查
  if (typeof window.myOptionalVar !== 'undefined') {
    // 安全使用变量
  }
  

你的代码在Chrome里正常，但Firefox等浏览器报错，核心原因是：直接写if(chrome)时，JS会先尝试解析chrome这个变量，如果全局作用域里根本没有它，就会直接抛出ReferenceError，连判断逻辑都走不到。

解决这个问题只需要把判断方式改成typeof chrome !== 'undefined'，这样即使变量不存在，也不会报错：

修改后的完整代码：

declare var chrome: any;

@Component({ templateUrl: './myComponent.component.html' })
export class MyComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 用typeof检查避免ReferenceError
    if (typeof chrome !== 'undefined') {
      // 这里写访问chrome扩展对象的逻辑
    }
  }
}

另外，如果你想获得更好的类型提示（不用any），可以安装Chrome扩展的TypeScript类型定义包：

npm install @types/chrome --save-dev

之后声明时就可以用更严谨的类型：

declare var chrome: chrome;

这样开发时IDE会给你自动补全和类型检查，同时不影响跨浏览器的运行时判断。

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