React TS: 함수를 props로 전달할 때 유형을 반복하지 말고 해당 유형을 사용하세요.

Don't repeat the type when you pass functions as props, use their types.

'SignUpForm'이라는 구성 요소가 있다고 가정해 보겠습니다.

export interface SignUpFormProps {
  onSubmit?: (values: {
    username: string;
    nickname: string;
    password: string;
  }) => void;
}

export const SignUpForm = ({ onSubmit }: SignUpFormProps) => {
  const [values, setValues] = useState({
    username: "",
    nickname: "",
    password: "",
  });

  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    setValues((prevValues) => ({
      ...prevValues,
      [e.target.name]: e.target.value,
    }));
  };

  const handleSubmit: React.FormEventHandler = (e) => {
    e.preventDefault();
    onSubmit?.(values);
  };

  return (
    <form
      onSubmit={handleSubmit}
      style={{ display: "flex", flexDirection: "column" }}
    >
      <input
        type="text"
        name="username"
        value={values.username}
        onChange={handleChange}
      />
      <input
        type="text"
        name="nickname"
        value={values.nickname}
        onChange={handleChange}
      />
      <input
        type="password"
        name="password"
        value={values.password}
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

제출 이벤트는 'username', 'nickname' 및 'password' 인수를 onSubmit prop에 전달합니다(있는 경우).

아래와 같이 함수를 전달할 수 있습니다.

function App() {
  const handleSubmit = (
    values
  ) => {
    console.log(values);
  };

  return (
    <div>
      <SignUpForm onSubmit={handleSubmit} />
    </div>
  );
}

옵션이 없으면"noImplicitAny": false 오류가 발생합니다.



이 문제를 방지하기 위해 onSubmit 유형을 반복할 수 있습니다.



이렇게만 반복하면 onSubmit 소품에 따라 최신 상태를 유지해야 합니다.

그것은 당신을 귀찮게 할 것입니다.
이 경우 대괄호를 사용하여 인터페이스의 필드 유형을 가져올 수 있습니다.

function App() {
  const handleSubmit:SignUpFormProps['onSubmit'] = (
    values
  ) => {
    console.log(values);
  };

  return (
    <div>
      <SignUpForm onSubmit={handleSubmit} />
    </div>
  );
}

인터페이스가 없으면 React.ComponentProps를 사용하십시오.

function App() {
  const handleSubmit: React.ComponentProps<typeof SignUpForm>["onSubmit"] = (
    values
  ) => {
    console.log(values);
  };

  return (
    <div>
      <SignUpForm onSubmit={handleSubmit} />
    </div>
  );
}

그게 다야. 누군가에게 도움이 되길 바랍니다.

행복한 코딩!


+
읽어주셔서 감사합니다, 여러분. 그래도 적절한 예인지 확실하지 않습니다. 요점은 필드 유형을 얻을 수 있고 다른 패키지와 함께 사용할 수 있다는 것입니다. 다시 한 번 관심을 가져 주셔서 감사합니다. 좋은 코딩!