리액트 타입스크립트 obj[key] 에러

Question

타입스크립트 이제 막 적용해보는 초보입니다.. 코드 내 monitorMenu[type].container 에서 [type]에 에러가 뜨는데 타입 지정이 잘못 된 건지 찾아봐도 원인을 모르겠습니다ㅜㅜ 물어볼 곳이 없어 질문합니다,,! 도움 부탁드립니다...ㅠㅠ // code import React, { useEffect, useState } from react; import { useNavigate, useParams } from react-router-dom; import DashboardContainer from ../containers/DashboardContainer; import IntegratedContainer from ../containers/IntegratedContainer; interface IMonitorMenu { [key: string]: { container: string | JSX.Element; }; } const Monitor = () => { const user: any = []; const { type } = useParams<{ type?: string }>(); const navigate = useNavigate(); const [menu, setMenu] = useState(integrated); const onClickMenu = (name: string) => { navigate(`/monitor/${name}`); }; const monitorMenu: IMonitorMenu = { integrated: { container: }, dashboard: { container: }, }; return (

...

{monitorMenu[type].container}

); }; export default Monitor; // error ERROR in src/pages/Monitor.tsx:37:25 TS2538: Type undefined cannot be used as an index type.

조용구 · Answer

안녕하세요 :) 실행해보진 않았는데 코드만 보면 type 변수가 문제로 보여요! 이 부분을 보면 --- const { type } = useParams<{ type?: string }>(); --- type은 옵셔널이라 undefined 값이될 가능성이 있어서 타입 에러가 발생하는 것 같아요. 이렇게 변경하면 동작 될거에요! --- <div>{type && monitorMenu[type].container}</div> ---

{type && monitorMenu[type].container}

---