Angular 5中检测IE11并解决「属性不存在」TypeScript警告

先直接回应你的两个疑问：

1. 为什么代码运行正常但TypeScript报错？ #

没错，你的理解完全正确！TypeScript的类型检查是编译阶段的行为，它会基于内置的Window、Document等接口定义校验代码规范性。而MSInputMethodContext和documentMode是IE11特有的属性，并没有包含在TS默认的全局类型定义里，所以TS会抛出类型错误。

但当代码被转译为纯JavaScript后，在IE11运行环境中这些属性确实存在，所以实际执行完全没问题——TS的报错只是类型层面的提示，不会影响代码的实际功能。

2. 如何解决TypeScript警告，或者有没有更好的替代方案？ #

你尝试的注释没效果，是因为//tslint:disable-line只能抑制TSLint的规则校验，管不了TypeScript本身的类型错误。这里给你几个可行的解决思路：

方案一：临时类型断言（快速修复） #

直接把window和document断言为any类型，绕过TS的类型检查：

ngOnInit(){
  this.isIE11 = !!(window as any).MSInputMethodContext && !!(document as any).documentMode;
  this.checkScrollPosition();
}

这种方式简单直接，适合快速修复单个场景的报错。

方案二：扩展全局类型（优雅的长期方案） #

如果项目里多处需要用到这些IE特有的属性，可以在项目根目录添加一个全局类型声明文件（比如src/global.d.ts），扩展TS的内置接口：

interface Window {
  // 加?标记为可选属性，避免在非IE浏览器中触发类型报错
  MSInputMethodContext?: unknown;
}

interface Document {
  documentMode?: number;
}

添加后，TS会自动识别这些属性，不用再写类型断言，代码也更规范。

方案三：改用特性检测（推荐） #

现在业内更推荐特性检测而非浏览器检测——直接检测你需要的API是否存在，而不是判断浏览器类型。针对滚动位置需求，你可以这样写：

private getCurrentScrollPosition(): number {
  // 优先使用现代浏览器的scrollY，不支持则降级到scrollTop
  return window.scrollY ?? document.documentElement.scrollTop ?? document.body.scrollTop ?? 0;
}

这种方式更健壮，不管是IE11还是其他老旧浏览器，只要支持对应的滚动属性就能正常工作，不需要依赖IE特有的标识，也避免了浏览器版本更新带来的维护问题。

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