주의

moment-duration-format에서는, 버전 2에서 TypeScript 대응이 발표되고 있는 것 같습니다. 최신 버전의 moment-duration-format을 사용하는 경우 업데이트를 통해 지원할 수 있으므로 GitHub을 확인하세요.
htps : // 기주 b. 코 m / jsm 리에세 / 모멘 t 즈라치 온 - 후 rma t

환경

Vue.js를 사용한 JavaScript(ES6)의 코드를 WebPack에서 굳혀 클라이언트측에서 실행하고 있다.
편집기는 VSCode

배경

이전 기사 htps : // 이 m / 아 - 네나가 / ms / 18c9 아 f67 아 bf1f897 에 72 에서는 ES6에서 개발 중인 프로젝트의 TypeScript 마이그레이션에 착수했다. 이 마이그레이션 작업 중에 moment-duration-format을 사용하는 클래스에서 컴파일 오류가 발생했습니다.

moment-duration-format은 시간을 다루는 라이브러리 moment.js( htps : // 모멘 tjs. 이 m ) 내의 기간을 표현하는 클래스 duration에 포맷 출력의 기능을 추가하는 라이브러리.

오류 메시지

Property 'format' does not exist


TypeScript에서는 잘 moment.Duration에 기능을 잘 추가해주지 않는다(라고 하는 것보다는 존재할 것이지만 부를 수가 없다?) 같다.

해결책

StackOverflow에 있었다.
h tps : // s c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 43058807 / HO W-TO-USE-MOMEN TO 즈라 치온

사용하고 있는 .ts 파일 내에서 moment.Duration을 확장한 Duration을 만들어 준다.

moment-duration-format을 사용하는 파일에서 interface 선언

interface Duration extends moment.Duration {
    format: (template?: string, precision?: number, settings?: DurationSettings) => String
}

interface DurationSettings {
    forceLength:boolean
    precision: number
    template: string
    trim: boolean | 'left' | 'right'
}

변경 전

const programLengthHHmm = moment.duration(program.lengthMinute, 'minutes').format('HH:mm', {trim: false})

moment.duration을 Duration형에 캐스트 하는 것으로, format() 함수를 호출할 수 있게 되었다.
precision이나 trim:false의 건네주는 방법이 바뀌었으므로, 그 부분의 대응도 더하고 있다.

변경 후

const durationSettings = {trim: false} as DurationSettings

const programLengthDuration = (moment.duration(program.lengthMinute, 'minutes') as Duration)
const programLengthHHmm = programLengthDuration.format('HH:mm', null, durationSettings) as string