inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

Slack 클론 코딩[실시간 채팅 with React]

DMList 소켓 연결 중에 타입스크립트 에러

202

재미있는 말미잘

작성한 질문수 6

0

const DMList: FC = () => {
const { workspace } = useParams<{ workspace?: string }>();
const {
data: userData,
error,
revalidate,
mutate,
} = useSWR<IUser>("/api/users", fetcher, {
dedupingInterval: 2000, // 2초
});
const { data: memberData } = useSWR<IUserWithOnline[]>(
userData ? `/api/workspaces/${workspace}/members` : null,
fetcher
);
const [socket] = useSocket(workspace);
const [channelCollapse, setChannelCollapse] = useState(false);
const [countList, setCountList] = useState<{ [key: string]: number }>({});
const [onlineList, setOnlineList] = useState<number[]>([]);

 

useSocket(workspace)에서 

TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.

  Type 'undefined' is not assignable to type 'string'.

 

에러가 뜨는데 workspace?: string으로 명시해주었는데 왜 이런 에러가 발생하는건가요? 깃허브에서 똑같이 코드를 가져왔는데도 같은 에러가 발생해서 어떤 점이 문제인지 도무지 알 수가 없어 여쭈어봅니다..ㅠㅠㅠ

 

 

 

 

 

웹팩 Socket.io babel react typescript 클론코딩

답변 1

0

제로초(조현영)

useSocket.ts 코드 보여주세요.

0

재미있는 말미잘

import io from "socket.io-client";
import React, { useCallback } from "react";

//ts에서 빈배열이나 빈객체에는 타이핑을 해줘야 한다!!!!!!
const sockets: { [key: string]: SocketIOClient.Socket } = {};
const backUrl = `http://localhost:3095`;

const useSocket = (
workspace: string
): [SocketIOClient.Socket | undefined, () => void] => {
const disconnect = useCallback(() => {
sockets[workspace].disconnect;
delete sockets[workspace];
}, [workspace]);

if (!workspace) return [undefined, disconnect];
sockets[workspace] = io.connect(`${backUrl}/ws-${workspace}`, {
transports: ["websocket"], //http연결을 요청(polling) 하지않고 바로 웹소켓만 하용하도록 명시
});

// const socket = io.connect(`${backUrl}`);
//보내기
// sockets[workspace].emit("hello", "world");
// //받기
// sockets[workspace].on("message", (data: any) => {
// console.log(data);
// });
// sockets[workspace].on("data", (data: any) => {
// console.log(data);
// });
// sockets[workspace].on("onlineList", (data: any) => {
// console.log(data);
// });

return [sockets[workspace], disconnect];
};

export default useSocket;

0

제로초(조현영)

여기서도 (workspace?: string) 이어야합니다. 워크스페이스가 undefined일 수도 있어서요

0

재미있는 말미잘

헉 ㅠㅠㅠㅠㅠ해결했습니다 감사합니다!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

기본 셋팅과 관련하여

0

106

1

초기 셋팅 back과 front만 남겨두고 다 지운 후 진행 방법

0

109

2

focus 시에만 화면 업데이트 되는 이유 + 해결방법

0

165

2

useEffect 개수 관리

0

122

2

라이브러리 서치 방법

0

118

2

함수 정의 패턴

0

80

1

npm run dev 에러

0

156

3

npx webpack 후 에러

0

187

2

'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345)

0

151

2

사용자 가입시 에러발생 (TypeError: Cannot read properties of null (reading 'addMembers')

1

192

2

초기세팅중 packge.json 에러떠요

0

162

2

CORS - Access-Control-Allow-Origin 누락 문제

0

439

3

로그인 페이지 무한 새로고침 현상

0

608

2

Module not found: Error: Can't resolve './App' 에러

0

970

1

배포 방법

0

306

2

npm run dev 시 빌드가 매우 느려졌습니다

0

1010

2

alias 경로 설정 오류

0

461

2

fetcher 함수의 data 값이 두번 찍히는 이유

0

282

1

제네릭 질문

0

225

2

ts-node 대신 tsx 사용여부

0

377

1

배포 관련 질문

0

249

1

[nginx + https] 서비스를 실행하면 niginx가 아닌 서비스 화면을 보여주게 하고 싶습니다.

0

395

2

[배포하기] webpack에 aws 퍼블릭 IPv4 주소 와 포트 주소를 작성하고 나서 빌드후 실행하면 오류가 발생합니다.

0

341

1

users 호출 시 쿠키가 담기지 않는 이슈 질문드립니다.

0

252

2