React Typescript socket.io-client Typescript error on io.connect

Question

I am using React Typescript with socket.io-client 4.0.0 and @types/socket.io-client 3.0.0. All is good up to a point in the code:

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

I am getting the following error on 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)

I would like the error to go away but of course, I do not know how to get rid of it. This is the only error I have in my tsx file.

It is worth to mention this is a class-based component. The IO is imported as such:

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

and type is assigned before initialization of the class:

let socket: any;

Answer 1

I would install "@types/socket.io" and then on client side, import like this:

import * as io from "socket.io-client";
const socket = io.connect("http://localhost:4000");

It cleared the error for me.