인프런 커뮤니티 질문&답변

안녕하세요 타입스크립트 강의 잘 듣고 있습니다. 좋은 강의 감사합니다. 하지만 아직 제 머리로는 이해가 되지 않는 부분이 있어 질문을 드리는데요.

여기 제가 구현하고자 하는DatePicker라는 클래스가 있고 이 클래스를 하나의 날짜를 선택하는 'single'타입의 DatePicker와 기간을 선택하는 'range' 타입의 DatePicker로 사용 가능하도록 만드려고 합니다.

type SingleValue = Date | null
type RangeValue = SingleValue[] & { length: 2 }
type DatePickerValue<T extends 'single' | 'range'> = {
  'single': SingleValue,
  'range': RangeValue
}[T]

class DatePicker<T extends 'single' | 'range'> {
  type:T
  value: DatePickerValue<T>

  constructor(type:T, initialValue:DatePickerValue<T>) {
    this.type = type
    this.value = initialValue
  }

  updateValue(date:Date) {
    // update value...
  }
}

const singeDatePicker = new DatePicker('single', new Date('2025-01-01'))
singeDatePicker.value = new Date('2025-01-15') // (property) DatePicker<"single">.value: SingleValue


const rangeDatePicker = new DatePicker('range', [new Date('2025-01-01'), new Date('2025-01-05')])
rangeDatePicker.value = [new Date('2025-01-03'), new Date('2025-01-10')] // (property) DatePicker<"range">.value: RangeValue

이렇게 DatePicker클래스의 type property의 제네릭을 통해 value의 타입도 잘 추론이 되는데요. 문제는 클래스 내부에서 타입을 좁히고 싶은데 잘 되지 않습니다.

아래처럼 updateValue 메소드를 DatePicker클래스에 추가하여 외부 달력 클릭시 날짜 객체를 인자로 넘겨 클래스의 value를 업데이트 해주기 위한 로직을 구현하려고 하는데, 클래스 내부에서는 사용자 정의 타입 가드를 사용해도 value 의 타입이 좁혀지지가 않습니다.

  updateValue(date:Date) {
    const isSingle = ():this is DatePicker<'single'> => this.type === 'single'
    const isRange = ():this is DatePicker<'range'> => this.type === 'range'

    if(isSingle()) {
      this.value = date
      // Type 'Date' is not assignable to type 'DatePickerValue<T>'.
      // Type 'Date' is not assignable to type 'Date & SingleValue[] & { length: 2; }'.
      // Type 'Date' is missing the following properties from type 'SingleValue[]': length, pop, push, concat, and 26 more.(2322)
      // (property) DatePicker<T extends "single" | "range">.value: DatePickerValue<T>
      return;
    }

    if(isRange()) {
      this.value = [date, null]
      // Type '[Date, null]' is not assignable to type 'DatePickerValue<T>'.
      // Type '[Date, null]' is not assignable to type 'Date & SingleValue[] & { length: 2; }'.
      // Type '[Date, null]' is not assignable to type 'Date'.(2322)
      // (property) DatePicker<T extends "single" | "range">.value: DatePickerValue<T>
      return;
    }
  }

제가 궁금한 것은 이렇게 클래스 내부에서 value: DatePickerValue<T>와 같은 조건부 타입을 사용자 정의 타입 가드로 추론을 하는 것이 가능한지 알고 싶습니다. 만약 안된다면 이유에 대해 설명 해주시면 감사하겠습니다.

아니면 제 구현 방식의 문제가 있다면 지적해 주시면 많은 도움이 될 것 같습니다.

감사합니다.