Typescript migration 과정에서 함수 props의 type

[HyeongtaekOh]

벨로퍼트 님 블로그 참고해서 컴포넌트가 전달받는 props의 type을 지정해주려고 합니다.

type ModalProps = {
  modalOpen: boolean;
  closeModal: Function; //Function type은 너무 광범위?해서 사용하면 안된다고 본 것 같은데 맞나 싶어서 적어봤습니다.
  loginToken: string;
  setSelectedStudent: ;
  getStudentList: ;
  getEntireStudentsStat: ;
}

const Modal = ({ modalOpen, closeModal, loginToken, setSelectedStudent, getStudentList, getEntireStudentsStat }: <ModalProps>) => ~~

여기서 각 함수들의 type을 어떻게 작성해줘야할지 모르겠습니다. 찾아보니 useState의 set함수 같은 경우 Dispatch<StateType> 이런 식으로 적으면 된다는 것 같은데 그외에 다른 함수들은 어떤 식으로 적어야될까요?
함수 로직이나 유형마다 하나하나 찾아봐야하는 것은 아니지 않을까 싶은데 디버깅 같은 작업을 통해 알 수 있는지 궁금합니다.

[woohm402]

컴포넌트 프로퍼티 타입의 경우 보통 두 가지 방법을 사용합니다. interface 로 예시를 썼는데 type도 똑같이 생각해주시면 됩니다.

1. React.FC

interface IProps {
  id: number;
  name: string;
}

const MyComponent: React.FC<IProps> = ({ id, name }) => {

2. 그냥 쓰기 + JSX.Element

interface IProps {
  id: number;
  name: string;
}

const MyComponent = ({ id, name }: IProps): JSX.Element => {

둘 중에 뭐가 낫냐는 꽤 대단한 논쟁거리인데.. 저는 머리로는 2번이 낫다고 생각하면서 1번을 주로 사용합니다.

[woohm402]

엥 그 질문이 아니었네요

[HyeongtaekOh]

네..ㅎㅎㅎ

[woohm402]

함수마다 타입 적어주시는 게 맞습니다. 일반적으로는 파라미터와 리턴 타입을 적습니다. Function을 타입으로 쓰는 건 피해야 합니다.

setSelectedStudent: (student: Student) => void;

일일이 써주셔야 되는 거 맞습니다만 변수든 함수든 타입의 복잡도가 크게 차이나지 않긴 합니다!

[HyeongtaekOh]

오.. 그런 양식으로만 적어주면 되는군요
감사합니다!