本文详解如何解决 TypeScript 下 Property 'data' does not exist on type 'Event' 的常见编译错误，通过正确声明 Service Worker 全局类型、配置 TypeScript 库支持及显式标注 PushEvent 类型，确保推送消息解析安全可靠。
本文详解如何解决 typescript 下 `property 'data' does not exist on type 'event'` 的常见编译错误，通过正确声明 service worker 全局类型、配置 typescript 库支持及显式标注 `pushevent` 类型，确保推送消息解析安全可靠。
在使用 Service Worker 实现 Web Push 功能时，开发者常遇到如下 TypeScript 编译错误：
Property 'data' does not exist on type 'Event'. Property 'registration' does not exist on type 'Window & typeof globalThis'.
这类报错并非运行时问题——实际 event.data 确实存在（如控制台打印 PushEvent 对象可清晰看到 data: PushMessageData），而是 TypeScript 类型系统未能识别 push 事件的专属类型所致。根本原因在于：默认 Event 类型过于宽泛，未包含 PushEvent 特有属性；且 Service Worker 全局作用域（self）未被 TypeScript 正确推导为 ServiceWorkerGlobalScope。
✅ 正确解决方案（三步到位）
1. 配置 tsconfig.json：启用 Web Worker 相关类型库
在 compilerOptions.lib 中明确加入 WebWorker 及配套 DOM 类型，确保 PushEvent、PushMessageData、ServiceWorkerGlobalScope 等类型可用：
{
"compilerOptions": {
"lib": ["ES2020", "DOM", "DOM.Iterable", "WebWorker"],
"module": "ESNext",
"target": "ES2020",
"strict": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"isolatedModules": true,
"allowSyntheticDefaultImports": true
}
}⚠️ 注意：仅含 "DOM" 不够！WebWorker 是关键补充，否则 PushEvent 类型不会被加载。
2. 显式声明全局 self 类型（推荐放在 service-worker.ts 顶部）
TypeScript 默认将 self 推断为 typeof globalThis，需手动覆盖为 ServiceWorkerGlobalScope：
// service-worker.ts
declare let self: ServiceWorkerGlobalScope;
self.addEventListener('push', (event: PushEvent) => {
// ✅ now event.data is fully typed
const data = event.data?.json(); // safe optional chaining
console.log('New notification', data);
// Ensure required fields exist before showing
if (data && typeof data === 'object' && 'title' in data) {
self.registration.showNotification(data.title, {
body: data.body || '',
icon: data.icon || './favicon.ico',
badge: data.badge || './favicon.ico'
});
}
});3. 使用 PushEvent 类型注解 —— 关键一步
务必为 addEventListener 的回调参数显式标注类型 PushEvent，而非依赖类型推导：
// ❌ 错误：类型为 Event，无 data 属性
self.addEventListener('push', (event) => { ... });
// ✅ 正确：明确指定 PushEvent 类型
self.addEventListener('push', (event: PushEvent) => {
const payload = event.data?.json(); // TypeScript now recognizes .data
});? 补充说明与最佳实践
event.data 可能为 null：根据 Push API 规范，服务端发送空载推送（无 data 字段）时，event.data 为 null。务必使用可选链 ?. 或判空处理，避免运行时错误。
self.registration 类型安全：ServiceWorkerGlobalScope 已定义 registration: ServiceWorkerRegistration，因此 self.registration.showNotification(...) 不再报错。
兼容性提醒：PushEvent.data.json() 返回 Promise，适用于 JSON 格式有效载荷。若服务端发送文本或 ArrayBuffer，请分别使用 .text() 或 .arrayBuffer()。
Vite / Workbox 用户：若集成 workbox-precaching，建议统一使用 declare let self: ServiceWorkerGlobalScope，并避免混用 import 语句（Service Worker 脚本应为纯 ESM 或 IIFE，不支持动态 import() 在 install 阶段）。
✅ 最终验证效果
完成上述配置后：
- TypeScript 编译零错误；
- VS Code 智能提示完整显示 event.data, event.waitUntil, self.registration 等属性；
- 运行时推送逻辑稳定，支持结构化数据解析与自定义通知渲染。
? 提示：生产环境务必配合 VAPID 密钥验证、HTTPS 部署、用户权限检查（Notification.permission === 'granted'）及服务端加密推送，才能构建高打开率、高到达率的 PWA 推送体系——这正是字节、阿里云等大厂在真实场景中验证过的可靠路径。
