如何在TypeScript项目中使用Service Worker Background Sync并解决类型错误

你遇到的三类报错均是TypeScript默认内置的lib.dom.d.ts未纳入Background Sync规范的API类型定义导致，可通过以下三种方式解决：

方案1：安装社区维护的类型包（最简单） #

直接安装Background Sync的类型定义包即可自动补全所有相关类型：

npm install @types/background-sync --save-dev

安装完成后重启TS服务即可消除所有类型报错。

方案2：手动扩展全局类型（可控性最高，推荐生产环境使用） #

如果不想引入额外的类型依赖，或者社区类型包不符合你的需求，可以手动写类型声明：

1. 在项目src目录下新建global.d.ts文件，填入以下内容：

declare global {
  // 扩展ServiceWorkerRegistration增加sync属性
  interface ServiceWorkerRegistration {
    readonly sync: SyncManager;
  }

  // 定义SyncManager类型
  interface SyncManager {
    register(tag: string): Promise<void>;
    getTags(): Promise<string[]>;
  }

  // 定义SyncEvent类型
  interface SyncEvent extends ExtendableEvent {
    readonly tag: string;
    readonly lastChance: boolean;
  }

  // 扩展ServiceWorker全局事件映射
  interface ServiceWorkerGlobalScopeEventMap {
    sync: SyncEvent;
  }
}

// 声明为模块避免全局类型冲突
export {};

2. 检查tsconfig.json的include配置，确保包含该声明文件：

{
  "compilerOptions": {/* 原有配置 */},
  "include": ["src/**/*", "src/global.d.ts"]
}

3. 调整Service Worker中的事件监听代码，显式指定事件类型：

self.addEventListener('sync', (event: SyncEvent) => {
  if (event.tag === 'syncSavedProjects') {
    event.waitUntil(doSomeStuff());
  }
});

方案3：临时类型断言（仅适合快速验证功能） #

如果不需要完整类型校验，仅想快速跑通代码，可以直接用any类型断言跳过校验：

// 注册sync的代码
navigator.serviceWorker.ready.then(function(swRegistration) {
  return (swRegistration as any).sync.register('myFirstSync');
});

// Service Worker中的监听代码
self.addEventListener('sync', function(event) {
  const syncEvent = event as any;
  if (syncEvent.tag == 'syncSavedProjects') {
    syncEvent.waitUntil(doSomeStuff());
  }
});

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