此表达式不可调用. TypeScript Angular11 Socket.io

当在 TypeScript Angular 11 中使用 Socket.io 时，您可能会遇到“此表达式不可调用”的错误。这个错误通常出现在您尝试调用 Socket.io client 的一些方法时。这是因为 Socket.io client 并不总是在 Angular 的依赖注入系统中注册。因此，您需要手动引用 Socket.io client 并将其添加到您的应用程序模块中。

以下是解决此问题的步骤：

1. 确保您已安装 @types/socket.io-client 和 socket.io-client 依赖项：

npm install --save @types/socket.io-client socket.io-client

2. 在您的 Angular 应用程序中，创建一个名为 socket-io.service.ts 的新服务文件：

import { Injectable } from '@angular/core';
import * as io from 'socket.io-client';

@Injectable({
  providedIn: 'root'
})
export class SocketIoService {
  private socket: SocketIOClient.Socket;

  constructor() { }

  public initSocket(): void {
    this.socket = io('http://localhost:3000'); // Replace with your server address
  }

  public on(eventName: string, callback: Function): void {
    this.socket.on(eventName, callback);
  }

  public emit(eventName: string, data: any): void {
    this.socket.emit(eventName, data);
  }

  public removeListener(eventName: string): void {
    this.socket.off(eventName);
  }

  public removeAllListeners(): void {
    this.socket.removeAllListeners();
  }
}

3. 在您的应用程序模块中添加代码来注册 Socket.io 服务：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SocketIoService } from './socket-io.service'; // <-- Add this line

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [SocketIoService], // <-- Add this line
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 在您的组件中使用 Socket.io 服务：

import { Component } from '@angular/core';
import { SocketIoService } from './socket-io.service';

@Component({
  selector: 'app-root',
  template: `...`
})
export class AppComponent {
  constructor(private socketService: SocketIoService) { }

  ngOnInit() {
    this.socketService.initSocket();
    this.socketService.emit('some-event', someData);
    this.socketService.on('some-event', (data: any) => {
      console.log(data);
    });
  }
}

这些步骤应该可以让您在 TypeScript Angular 11 应用程序中成功使用 Socket.io client，同时避免了“此表达式不可调用”的错误。