What type is socket instance?-CodePudding

I could not find an answer on other posts so I am starting my own.

I am passing a 'socket' instance as prop to my Home and ChatPage components but I am not sure what type to give to it. I went to the socket.io documentation but nothing has helped me so far.

App.tsx:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import * as io from "socket.io-client";

import "./App.css";
import ChatPage from "./pages/ChatPage";
import Home from "./pages/Home";

const socket = io.connect("http://localhost:4000");

function App() {
  return (
    <BrowserRouter>
      <div>
        <Routes>
          <Route path="/" element={<Home socket={socket} />}></Route>
          <Route path="/chat" element={<ChatPage socket={socket} />}></Route>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

Home.tsx

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

type Socket = {
  socket: any
}

const Home: React.FC<Socket> = ({ socket }) => {
  const navigate = useNavigate();
  const [userName, setUserName] = useState("");

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    localStorage.setItem("userName", userName);
    navigate("/chat");
  };
  return (
    <form className="home__container" onSubmit={handleSubmit}>
      <h2 className="home__header">Sign in to Open Chat</h2>
      <label htmlFor="username">Username</label>
      <input
        type="text"
        minLength={6}
        name="username"
        id="username"
        className="username__input"
        value={userName}
        onChange={(e) => setUserName(e.target.value)}
      />
      <button className="home__cta">SIGN IN</button>
    </form>
  );
};

export default Home;

What can I pass instead of 'any' in my Socket type?

I am open to suggestions at this point. Thanks.

CodePudding user response：

The variable socket will be of type Socket. you can import it as follows

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