Angular项目引入@types/chrome的StorageChange接口失效如何解决

1. 确认依赖安装正确性 #

首先检查@types/chrome是否已正确安装到开发依赖中，若未安装执行对应命令：

# npm
npm install @types/chrome -D
# yarn
yarn add @types/chrome -D
# pnpm
pnpm add @types/chrome -D

2. 纠正类型使用方式 #

StorageChange不是@types/chrome的顶层导出类型，而是挂载在chrome.storage命名空间下的子类型，不能直接使用裸名StorageChange，同时注意onChanged回调的第一个参数是键值对结构，键为存储字段名，值才是StorageChange类型，正确写法如下：

chrome.storage.onChanged.addListener(
  (changes: Record<string, chrome.storage.StorageChange>, namespace: string) => {
    // 业务逻辑
  }
);

如果需要简化使用可以提前声明类型别名：

type StorageChange = chrome.storage.StorageChange;

// 后续可直接使用
chrome.storage.onChanged.addListener(
  (changes: Record<string, StorageChange>, namespace: string) => {
    // 业务逻辑
  }
);

3. 修正TS配置覆盖问题 #

Angular项目默认存在多层TS配置文件，仅修改根目录tsconfig.json不生效，需要将chrome加入应用层级的配置中：

• 打开tsconfig.app.json（通常在src目录同级）
• 在compilerOptions.types数组中添加"chrome"，示例配置：

{
  "compilerOptions": {
    "types": ["chrome"]
  }
}

如果手动修改过typeRoots配置，需要确保配置中包含"node_modules/@types"路径，否则TS无法识别@types下的类型包。

4. 清除TS服务缓存 #

配置修改完成后需要重启TypeScript服务消除缓存报错：

• 按Ctrl+Shift+P（Mac端为Cmd+Shift+P）调出命令面板
• 执行TypeScript: Restart TS Server即可，若仍报错可重启VSCode验证。

5. 冲突排查 #

如果项目中存在手动声明的chrome全局类型文件（通常在src/types目录下以.d.ts结尾），需要删除对应自定义声明，避免和@types/chrome的类型定义冲突。

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