TypeScript - dayjs type 지정

배경

날짜 필터링을 하기 위해 [ 하루, 일주일, 한 달, 분기, 반기, 일년 ] 버튼을 각각 클릭했을 때 오늘 날짜로부터 역산해서 DatePicker(MUI)의 날짜를 세팅하고 싶었다.

dayjs 라이브러리를 사용하고 있었으므로 endDate를 오늘(당일) 날짜로, startDate를 오늘(당일) 날짜에서 역산해서 subtract 메서드를 사용하고자 subtract 메서드에 넘겨줄 날짜 단위와 수량을 지정했다.

export const SampleComponent = ({
    filterOptions: { startDate, endDate },
    setFilterOptions,
}: SampleComponentProps) => {
    const timeRange = [
        { display: '하루', unit: 'day', step: 1 },
        { display: '일주일', unit: 'week', step: 1 },
        { display: '한 달', unit: 'month', step: 1 },
        { display: '분기', unit: 'month', step: 3 },
        { display: '반기', unit: 'month', step: 6 },
        { display: '일년', unit: 'year', step: 1 },
    ];

    return (
        <Stack direction="row">
            {timeRange.map(({ display, unit, step }) => (
                <Button
                    onClick={() =>
                        setFilterOptions((prev) => ({
                            ...prev,
                            startDate: dayjs().subtract(step, unit),
                            endDate: dayjs(),
                        }))
                    }
                    key={display}
                >
                    {display}
                </Button>
            ))}
            <DatePicker
                onChange={(date) => setFilterOptions((prev) => ({ ...prev, startDate: date }))}
                value={startDate}
            />
            <DatePicker
                onChange={(date) => setFilterOptions((prev) => ({ ...prev, endDate: date }))}
                value={endDate}
            />
        </Stack>
    );
};

 

문제상황

Argument of type 'string' is not assignable to parameter of type 'ManipulateType | undefined'.

라는 에러가 떴다.

 

해결

에러에 명시된 ManipulateType을 dayjs github에서 찾아보니 이렇게 되어 있었다. (https://github.com/iamkun/dayjs/blob/dev/types/index.d.ts)

그래서 아래와 같이 타입을 명시해주었다.

// 변경한 코드
const timeRange: { display: string; unit: 'day' | 'week' | 'month' | 'year'; step: number }[] =
        [
            { display: '하루', unit: 'day', step: 1 },
            { display: '일주일', unit: 'week', step: 1 },
            { display: '한 달', unit: 'month', step: 1 },
            { display: '분기', unit: 'month', step: 3 },
            { display: '반기', unit: 'month', step: 6 },
            { display: '일년', unit: 'year', step: 1 },
        ];
        
        
// 기존 코드
const timeRange = [
        { display: '하루', unit: 'day', step: 1 },
        { display: '일주일', unit: 'week', step: 1 },
        { display: '한 달', unit: 'month', step: 1 },
        { display: '분기', unit: 'month', step: 3 },
        { display: '반기', unit: 'month', step: 6 },
        { display: '일년', unit: 'year', step: 1 },
    ];

 

끝.