实例化NotificationsService时遇TypeScript构造签名缺失错误

问题背景 #

你编写了notifications.service.ts文件用于获取推送通知令牌，代码将其定义为React函数组件，但在App.tsx中尝试用new关键字实例化时出现错误：

'new' expression, whose target lacks a construct signature, implicitly has an 'any' type.

你尝试给函数添加this: any的类型标注，但不确定是否正确。

错误原因 #

原代码中的NotificationsService是React函数组件，并非类，因此不能用new关键字实例化；同时组件内部使用了useEffect这类React Hook，Hook只能在React组件或自定义Hook的顶层调用，不能在类或普通函数的实例化逻辑中使用。

正确解决方案 #

方案1：改为自定义Hook（推荐，保留React生命周期适配） #

将原函数修改为自定义Hook，符合React Hook的使用规范，自动在组件挂载时初始化推送服务：

修改后的notifications.service.ts：

import { useEffect } from 'react';
import { PushNotifications, PushNotificationSchema, PushNotificationToken } from '@capacitor/push-notifications';
import { Capacitor } from '@capacitor/core';

// 自定义Hook命名以use开头，符合React规范
export function useNotificationsService() {
  useEffect(() => {
    initPush();
  }, []);

  function initPush() {
    if (Capacitor.getPlatform() !== 'web') {
      registerPush();
    }
  }

  function registerPush() {
    PushNotifications.requestPermissions().then((permission) => {
      if (permission.receive === 'granted') {
        PushNotifications.register();
      } else {
        // 这里添加权限未授予的处理逻辑
      }
    });

    PushNotifications.addListener('registration', (token: PushNotificationToken) => {
      console.log(token.value);
    });

    PushNotifications.addListener('registrationError', (err) => {
      console.log(err);
    });

    PushNotifications.addListener('pushNotificationReceived', (notification: PushNotificationSchema) => {
      console.log(notification);
    });
  }

  // 如需手动触发初始化，可对外暴露方法
  return { initPush };
}

App.tsx中的用法：

import { useNotificationsService } from './services/notification.service'; 

function App() {
  // 直接调用自定义Hook，组件挂载时自动执行推送初始化
  useNotificationsService();

  // 若需手动控制初始化时机，可改用以下写法：
  // const { initPush } = useNotificationsService();
  // useEffect(() => {
  //   // 在合适的时机调用initPush
  //   initPush();
  // }, [initPush]);

  return <div>你的应用内容</div>;
}

方案2：改为类（脱离React Hook，适合非组件场景） #

如果不需要依赖React生命周期，可将服务改写为普通类，这样就能用new实例化：

修改后的notifications.service.ts：

import { PushNotifications, PushNotificationSchema, PushNotificationToken } from '@capacitor/push-notifications';
import { Capacitor } from '@capacitor/core';

export class NotificationsService {
  initPush() {
    if (Capacitor.getPlatform() !== 'web') {
      this.registerPush();
    }
  }

  private registerPush() {
    PushNotifications.requestPermissions().then((permission) => {
      if (permission.receive === 'granted') {
        PushNotifications.register();
      } else {
        // 这里添加权限未授予的处理逻辑
      }
    });

    PushNotifications.addListener('registration', (token: PushNotificationToken) => {
      console.log(token.value);
    });

    PushNotifications.addListener('registrationError', (err) => {
      console.log(err);
    });

    PushNotifications.addListener('pushNotificationReceived', (notification: PushNotificationSchema) => {
      console.log(notification);
    });
  }
}

App.tsx中的用法：

import { NotificationsService } from './services/notification.service'; 
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const pushNotifications = new NotificationsService();
    pushNotifications.initPush();
  }, []);

  return <div>你的应用内容</div>;
}

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