在 io.connect 上反应 Typescript socket.io-client Typescript 错误答案

【问题标题】：React Typescript socket.io-client Typescript error on io.connect在 io.connect 上反应 Typescript socket.io-client Typescript 错误
【发布时间】：2022-06-30 16:26:54
【问题描述】：

我正在使用带有 socket.io-client 4.0.0 和 @types/socket.io-client 3.0.0 的 React Typescript。代码中的一切都很好：

socket = io.connect(`ws://${WS_DOMAIN}:${WS_PORT}`, { transports: ["websocket"] });

我在 io.connect 上收到以下错误：

any
Property 'connect' does not exist on type '{ (opts?: Partial<ManagerOptions &
SocketOptions> | undefined): Socket<DefaultEventsMap, DefaultEventsMap>; (uri: string, 
opts?: Partial<...> | undefined): Socket<...>; (uri: string | Partial<...>, opts?: 
Partial<...> | undefined): Socket<...>; }'.ts(2339)

我希望错误消失，但当然，我不知道如何摆脱它。这是我的 tsx 文件中唯一的错误。

值得一提的是，这是一个基于类的组件。 IO 是这样导入的：

import { io } from 'socket.io-client';

并且在类初始化之前分配类型：

let socket: any;

【问题讨论】：

标签： reactjs typescript socket.io

【解决方案1】：

看文档我注意到IO连接的使用方式如下：

io(`ws://${WS_DOMAIN}:${WS_PORT}`, { transports: ["websocket"] });

所以没有io.connect 部分

这也解决了我的问题。希望这对可能遇到类似问题的人有所帮助。

【讨论】：

【解决方案2】：

[2022]：在类型脚本 react 项目中，这可能会对您有所帮助。对于最新的 socket.io-client，这对我来说很好。

我已经通过以下代码解决了这个问题。

import { io } from 'socket.io-client';
const ChatRoom =({username,room})=>{
 const socket = io('http://localhost:3001');
 const joinRoom = () => {
    if (username !== "" && room !== "") {
      socket.emit("join_room", room);
     
    }

useEffect(()=>{
    joinRoom();
},[room])
  };


  return (
    <div className="App">
      <ChatComponent socket={socket} username={username} room={room} />
    </div>
  );
}

【讨论】：