TypeScript中window对象的使用与类型问题——以localStorage为例

嘿，我刚学TS的时候也被这个问题卡过，正好给你梳理清楚～

1. 直接使用内置的window属性（比如localStorage） #

其实在浏览器环境下，TypeScript已经帮我们处理好了大部分原生window属性的类型，你直接用window.localStorage就行，比如：

// 存值
window.localStorage.setItem('username', 'petur');
// 取值
const username = window.localStorage.getItem('username');

完全不用额外折腾，TS会自动给你补全方法提示，还会检查参数类型是否正确。

2. window.localStorage的类型是什么？ #

它的类型是内置的Storage接口，这个接口定义在TypeScript的DOM类型库（lib.dom.d.ts）里，包含了getItem()、setItem()、removeItem()、clear()这些方法的类型约束——比如getItem()会返回string | null，因为如果对应的key不存在就会返回null，TS会帮你把这个边界情况考虑到。

3. 我需要自己编写接口吗？ #

大部分原生window属性完全不需要！因为TypeScript默认已经包含了DOM相关的类型定义（只要你的tsconfig.json里配置了"dom"在lib选项里，这个一般是默认开启的）。

但如果你给window添加了自定义属性，比如你想加一个window.appVersion来存当前应用版本，这时候就需要扩展Window接口了，不然TS会报错说找不到这个属性。扩展的方法很简单：

declare global {
  interface Window {
    appVersion: string;
  }
}

// 现在使用就有类型提示了，不会报错
window.appVersion = '1.0.0';
console.log(window.appVersion);

最后补充一句：如果你的项目里突然识别不了window的类型，可以检查下tsconfig.json的compilerOptions.lib，确保包含了"DOM"，比如：

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM"]
  }
}

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