타입스크립트 'value' is possibly 'null' 에러 옵셔널체이닝으로 해결안되는 이슈

6개월 전

```
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 값일 수도 있다길래 옵셔널체이닝을 줬는데 여전히 에러가 발생합니다.. 해결방법을 도무지 모르겠네요.. 도와주시면 진심으로 감사하겠습니다ㅠㅠㅠ

털먹는토끼

6개월 전

댓글 0

아직 댓글이 없습니다. 첫번째 댓글 작성자가 되어주세요 :)

뎁스노트 앱으로 보시겠습니까?