리액트에서 타입스크립트 사용할 때 이런 경우 타입을 어떻게 줘야할지 모르겠습니다

Question

리액트와 타입스크립트를 연습해보려고 혼자 토이프로젝트를 만드는 중인데
어떤 타입을 지정해줘야 할지 모르겠어서 질문올립니다. 혹시 더 자세한 설명이 필요할 것 같으면 댓글부탁드려요!

상황)
리액트, 타입스크립트를 사용하는 프로젝트에서 부트스트랩 모달을 사용하려고 합니다.
사진1번이 모달을 포함하고있는 부모컴포넌트, 사진2번이 모달컴포넌트 인데
부모컴포넌트에서 모달컴포넌트로 show, onHide라는 2개의 props를 넘깁니다(부트스트랩에서 지정해놓은 프롭스입니다.)
부모컴포넌트에는 모달의 표시 여부를 관리하는
const [showEmptyInputModal, setShowEmptyInputModal] = useState(false);
이라는 상태값이 있고 그게 각각 props로 넘겨지게 되는 것 같습니다.

여기서 문제)
그런데 사진2번에 넘겨주는 props의 타입을 어떻게 설정해야할 지 모르겠습니다...
일단 any로 하면 작동은 되긴하는데ㅠㅠ any는 최대한 쓰지 않는게 좋다고 해서요
사진4번의 빠른 수정을 보면 이런 옵션들이 있던데 unknown이나 never를 사용하면 그 props를 사용하는 곳들에서 에러가 납니다.
any를 사용하거나 빠른 수정의 옵션 중 eslint 규칙을 무시하는 선택지밖에 없는 걸까요?
state와 setState를 실행하는 함수 props로 넘기려면 타입을 어떻게 줘야하나요...!

SLA · Answer

{show: boolean, onHide: { (): void }}

손정현 · Answer

안녕하세요! showEmptyInputModal이나 setShowEmptyInputModal에 마우스 호버하면 타입뜨지 않나요? 둘의 타입은 이렇게 뜰 것 같습니다. showEmptyInputModal: boolean setShowEmptyInputModal: React.Dispatch<React.SetStateAction<boolean>> 모달에서는 props: { showEmptyInputModal: boolean setShowEmptyInputModal: React.Dispatch<React.SetStateAction<boolean>>} 로 넣어주시면 될 것 같습니다 :) + vscode 사용중이시면 요 설정들 켜보시는걸 추천드립니다: - "typescript.inlayHints.variableTypes.enabled": true, - "typescript.inlayHints.propertyDeclarationTypes.enabled": true, - "typescript.inlayHints.parameterTypes.enabled": true, - "typescript.inlayHints.functionLikeReturnTypes.enabled": true

리액트에서 타입스크립트 사용할 때 이런 경우 타입을 어떻게 줘야할지 모르겠습니다

리액트에서 타입스크립트 사용할 때 이런 경우 타입을 어떻게 줘야할지 모르겠습니다