WebPush.ts导出后调用sendNotification报错：类型void无该属性

错误原因 #

webpush.setVapidDetails() 是一个**无返回值（void类型）**的方法，它仅负责修改webpush实例的配置，不会返回可调用的实例对象。你当前导出的WebPush变量是这个方法的返回值（即void），自然不存在sendNotification方法，因此触发类型错误。

解决方案 #

只需在完成配置后导出webpush模块本身即可，两种写法可选：

写法一：默认导出 #

修改WebPush.ts：

import webpush from 'web-push'

// 完成VAPID配置
webpush.setVapidDetails(
  `mailto:${process.env.ADMIN_EMAIL}`,
  process.env.PUBLIC_VAPID_KEY!,
  process.env.PRIVATE_VAPID_KEY!
)

// 导出配置好的webpush实例
export default webpush

导入使用：

import WebPush from '../../Services/WebPush'

async somefunction(){
  await WebPush.sendNotification(pushSubscripton, payload)
}

写法二：命名导出 #

修改WebPush.ts：

import webpush from 'web-push'

// 完成VAPID配置
webpush.setVapidDetails(
  `mailto:${process.env.ADMIN_EMAIL}`,
  process.env.PUBLIC_VAPID_KEY!,
  process.env.PRIVATE_VAPID_KEY!
)

// 导出配置好的webpush实例
export const WebPush = webpush

导入使用方式和你原代码一致，无需修改。

为什么直接在目标文件配置不报错？ #

因为你在目标文件中调用setVapidDetails后，直接使用的是已完成配置的webpush模块本身，而非setVapidDetails的返回值，因此能正常调用sendNotification方法。

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