안녕하세요 애플센세 타입스크립트 관련 질문이 있어 이렇게 끄적여봅니다.
<코드내용>
import DateRangePicker from "@wojtekmaj/react-daterange-picker";
import { useDispatch } from "react-redux";
import { dateFetch } from "components/feature/FetchSlice";
import styled from "styled-components";
type ValuePiece = Date | null;
type Value = ValuePiece | [ValuePiece, ValuePiece];
export default function CustomCalendar() {
const dispatch = useDispatch();
const [value, onChange] = useState<Value>([new Date(), new Date()]);
return (
<CalendarBox>
<Calendar>조회 기간</Calendar>
<StlyedDateRangePicker
onChange={onChange}
value={value}
onCalendarClose={() => {
dispatch(
dateFetch({
startDate: value[0]?.toISOString(),
endDate: value[1]?.toISOString(),
})
);
console.log(value);
}}
/>
</CalendarBox>
);
}
<코드내용 끝>
<StlyedDateRangePicker>는 styled component로 만든 DateRangePicker 라이브러리 컴포넌트입니다.
DateRangePicker 에서 날짜 2개를 선택하면 value라는 배열에 Date 객체 2개가 들어갑니다.
그리고 onCalendarClose 함수가 동작하면서 redux로 만들어놓은 startDate, endDate 객체에 각각 date를 toISOString() 처리한 값이 할당되는 로직입니다.
날짜를 선택하기 전에는 value={value}의 value 배열요소인 Date객체 값이 null 값이니까 type ValuePiece = Date | null; 타입지정을 해줬습니다.
startDate: value[0]?.toISOString(),
endDate: value[1]?.toISOString(),
근데 위 코드의 value[0], value[1] 에러가 나더라구요.
'value' is possibly 'null'.ts(18047)
Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'Date | [ValuePiece, ValuePiece]'.
Property '0' does not exist on type 'Date | [ValuePiece, ValuePiece]'.
null 값일 수도 있다길래 옵셔널체이닝을 줬는데 여전히 에러가 발생합니다.. 해결방법을 도무지 모르겠네요.. 도와주시면 진심으로 감사하겠습니다ㅠㅠㅠ
