파라미터 타입지정

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

회원가입 페이지 만들기

작성

357

안녕하세요 !

저는 이번에 웹팩 및 바벨 설정부터 죽 타입핑을 하며 익히고 잇는데요, SignUp > index.tsx 부분의 일부코드인데 보시는 바와 같이 영상속 제로초님과는 다르게 `e`의 타입을 지정해주지 않으면 로컬자체가 켜지지 않더라고여 😅 혹시 제가 어느부분때문에 제로초님과 다르게 진행되고있는지 알 수 있을까요 ?

  const onChangeEmail = useCallback((e: any) => {
    setEmail(e.target.value);
  }, []); 

  const onChangeNickname = useCallback((e: any) => {
    setNickname(e.target.value);
  }, []);

  const onChangePassword = useCallback(
    (e: any) => {
      setPassword(e.target.value);
      setMissmatchError(e.target.value !== passwordCheck);
    },
    [passwordCheck], 
  );

  const onChangePasswordCheck = useCallback(
    (e: any) => {
      setPasswordCheck(e.target.value);
      setMissmatchError(e.target.value !== password);
    },
    [password],
  );

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

답변 2

hoon

React.ChangeEvent<HTMLInputElement>로 적어줘야하네요.

<input onChange={(e) => e}> 라고 친다음에 e위에 마우스커서 올리면 IDE가 어떤 타입인지 알려줍니다.

제로초(조현영)

지식공유자

e에 any를 입력하지 않았을 때 발생하는 애러가 뭔가요?

도토잠보

질문자

ERROR in ./pages/SignUp/index.tsx:16:6
TS7006: Parameter 'e' implicitly has an 'any' type.
    14 |
    15 |   const onChangePassword = useCallback(
  > 16 |     (e) => {
       |      ^
    17 |       setPassword(e.target.value);
    18 |       setMissmatchError(e.target.value !== passwordCheck);
    19 |     },

sleact (webpack 5.72.1) compiled with 1 error in 555 ms

입니당

제로초(조현영)

지식공유자

네네 저게 뜨면 매개변수에도 타입 붙여주어야 합니다.

도토잠보

질문자

답변너무 감사합니다 🙇‍♂️

질문을 하나 더 드려도 될까요 ?

어째서 제로초님은 파라미터 타입을 설정하지 않았는데도 에러가 나지 않는건가요 ? 🤔

제로초(조현영)

지식공유자

리액트 몇 버전이신가요? 리액트 17버전에서는 useCallback의 e가 any로 자동 타이핑되어 있습니다.