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

1년 전

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

297

털먹는토끼

1년 전

댓글 1

답변 작성

이미지 첨부

닥터핸

이 문제는 value의 타입이 명확하지 않아서 발생합니다.

useState의 초기값을 [new Date(), new Date()]로 설정했지만 타입스크립트는 value를 배열 또는 다른 타입으로 혼동하고 있어요.

이를 해결하려면 useState에 제네릭을 명확히 지정하면 됩니다.

예를 들어 const [value, onChange] = useState<[Date, Date]>([new Date(), new Date()]);

이렇게 설정하면 value는 항상 두 개의 Date 객체를 가지는 배열로 인식됩니다.

그러면 value[0]?.toISOString()과 같은 코드도 안전하게 작동합니다.

만약 타입을 더 엄격하게 검사하고 싶다면 if (Array.isArray(value))를 사용해서 배열인지 확인한 후에 값을 처리하면 됩니다.

4개월 전 ∙ 0 ∙ 답글 달기 ∙ 공유 ∙ 신고 ∙ 차단