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

안녕하세요! 타입스크립트가 워낙 까다로운 언어이다보니 많은 고민이 있으셨을 것 같네요! 근본적으로는 현재 value의 타입이 잠재적으로 null | Date | [ Date | null, Date | null ] 형태의 어레이와 결합된 복잡한 형태를 띄고 있기 때문에, 이러한 구조 자체가 TS에서 어느정도 지양해야할 패턴으로 보입니다. 하지만 외부라이브러리를 쓰시는 것으로 보여서 감수하고 해결 가능한 답변을 생각해보겠습니다! 먼저 질문자님께서 시도하셨던 방식에서 value는 array일 수도, 아닐 수도 있기 때문에 0번, 1번 인덱스에 접근하고자 하는 시도 자체가 타입에러를 내고 있는 듯 합니다. 따라서 이를 방지하기 위해, 먼저 타입가드 / 조건문 등의 방식을 통해 array형태 여부를 걸러서 케이싱을 해준다면 더 안전한 코드 작성이 가능해 보입니다. 작성시엔 여러 방식이 있지만, 코드의 가독성면에서 제일 좋아보이는 타입가드 코드를 첨부해두겠습니다!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 타입가드 함수
function isValuePieceArray(value: Value): value is [ValuePiece, ValuePiece] {
  return Array.isArray(value);
}

const onCalendarClose = () => {
  if (isValuePieceArray(value)) {
    // value가 [ValuePiece, ValuePiece] 인 경우
    dispatch(
      dateFetch({
        // 필요에 따라 Nullish Coalescing 추가
        startDate: value[0]?.toISOString(),
        endDate: value[1]?.toISOString(),
      }),
    );
  } else {
    // value가 ValuePiece인 경우
    ...
  }
};

첫 번째 방안: dispatch 호출 전에 조건 문을 통한 타입 강제 및 체크 두 번째 방안: as 키워드 사용 세 번째 방안: Option, Either 같은 모나드를 사용한 패턴 매칭

type ValuePiece = Date | null; type Value = ValuePiece | [ValuePiece, ValuePiece]; 이부분에서 Value = (Date | null) | [(Date | null), (Date | null)]; 로 풀이되어서 Null 일 가능성이 있다고 하는 것 아닐까요? 그리고 배열이 아니라 단순한 Date일 가능성도 있어서, 인덱스를 통한 접근은 Date 타입에 사용할 수 없다고 이야기하는 것 같아요! DateRangePicker에서 범위가 한 날짜에 해당하거나, 여러 날짜에 해당하는 경우 나눠서 조건문으로 타입체크하는게 좋아보입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 배열에 대한 타입가드
function isArrayOfType<T>(arr: any[], type: new (...args: any[]) => T): arr is T[] {
  return arr.every(item => item instanceof type);
}

// 단일 날짜
var value = new Date(2024, 3, 25);

// 여러 날짜
// var value = [new Date(2024, 3, 24), new Date(2024, 3, 25)]

// 타입이 맞지 않음
// var value = [new Date(2024, 3, 24), null]

if(value instanceof Date) {
  console.log("Date");
} else if (isArrayOfType(value, Date)) { 
  console.log("Array");
} else {
  console.log("TYPE NOT MATCHED");
}