The 'format' property cannot be found on the 'Duration' type

When working with TypeScript and trying to utilize "moment-duration-format", I encountered an issue where webpack is constantly throwing errors stating that it cannot locate the "format" method in this line of code:

return moment.duration(value, "minutes").format("...");

Here are the dependencies listed in package.json:

{
  "devDependencies": {
    "@types/moment-duration-format": "^1.3.7"
  },
  "dependencies": {
    "moment": "^2.18.1",
    "moment-duration-format": "^1.3.0"
  }
}

And here is tsconfig.json configuration provided:

{
  "compilerOptions": {
    "typeRoots": [ "./node_modules/@types" ]
  }
}

Within the Angular2 component:

import * as moment from "moment";
import * as momentDurationFormat from "moment-duration-format";

...

let result: string = moment.duration(this.selectedHangarDistance * 10, "minutes").format("...")

I even attempted using:

import "moment-duration-format";

However, the error persists:

ERROR in [at-loader] ./src/app/components/building/shop/shop.component.ts:190:81 TS2339: Property 'format' does not exist on type 'Duration'.

angulartypescriptwebpackmomentjs

Answer №1

Here is a helpful solution that I found:

import * as time from "time";
import timeFormatSetup from "time-format";
timeFormatSetup(time);

I discovered that using * as time was important because simply using 

import time from "time"
caused some type issues when passing in timeFormatSetup.

Answer №2

Execute one of the following commands to install types for moment-duration-format package: 

yarn add --dev @types/moment-duration-format
or 
npm install --save-dev @types/moment-duration-format

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue of React TypeScript useContext not causing a re-render when there is a change

I have been attempting to modify an object using useContext, but it seems that the changes are not being reflected on the screen. Interestingly, if I click on another button, both buttons trigger their respective actions. The relevant code can be found bel ...

reactjstypescriptreact-hooksuse-context

The form submission is yielding an incorrect value

When creating multiple form groups, the issue arises where submitting one form returns the value of the last entered form. export class ExpansionOverviewExample { panelOpenState = false; tables: string[] = ['one', 'two', 'three ...

angularangular9

How can we create drawings within an Angular2 component using canvas?

I have created a basic component using a canvas element, and I am currently resizing it with an Input property within the corresponding TypeScript class. My goal is to draw the canvas element directly inside the class. The following code snippet shows my ...

javascripttypescriptangular

What is the best way to handle waiting for an HTTP request to complete from a separate component?

https://i.sstatic.net/q4XYB.png An issue arises when calling the GetData function from a component's controller too early. I would like it to wait for the identification process to complete before triggering. During page loading, there is a server c ...

javascriptangularrxjs

What is the best way to create a user-friendly interface using a combination of styled-components?

I am currently working on creating a user interface using a combination of styled-components: import styled from "styled-components" const StyledTitle = styled.div`` const StyledTitleNumber = styled.div`` const StyledTitleNumberDigit = styled.di ...

javascriptreactjstypescriptstyled-components

A guide to accessing the value of a web.config appsetting key in a Type Script service class

I am currently working on an Angular 2 application in Visual Studio 2015. In my project, I need to retrieve the app setting value from web.config in a TypeScript file (service.ts). Despite searching online and reading various resources, I have not been ab ...

visual-studioangulartypescript

Obtain a personalized response from an Angular HTTP service

I'm trying to implement the following code directly in a component: if(exampleService.checkValidityOfToken()) { //do something } Here is the method in exampleService that corresponds to this. I'm not sure if I am returning the value properly or ...

angular

Obtain an instance of a class within a function that is contained within an instance object in TypeScript/Angular

There is a separate object responsible for managing a specific dialog box in my application. The challenge lies in accessing the instance of the class, even though the functions are self-explanatory. I attempted to use the conventional method of that = thi ...

javascriptangulartypescriptclass

When testing my POST request online, it functions properly. However, I am facing difficulties in getting it to work in next.js as I keep receiving a 405

I am currently working on establishing a connection to Zoho Creator in order to retrieve some data. After successfully testing the request on and receiving the correct response, I encountered an issue while trying to implement it within a next.js applicat ...

typescriptpostnext.jszohoapp-router

Having trouble with importing a TypeScript class: encountering a "cannot resolve" error message

Could you lend me your expertise? I'm puzzled by this issue that seems to be quite simple and straightforward: export class Rectangle { height: number = 0 width: number = 0 constructor(height: number, width: number) { this. ...

javascripttypescriptclassimport

Troubleshooting: Issues with Angular 2 Dependency Injection

I am facing an issue with my angular2 application that involves a simple dependency injection, but it seems to be not working correctly. Can anyone help me figure out what might be missing? Below is the error message I am encountering: EXCEPTION: Cannot ...

dependency-injectiontypescriptangular

Dynamic labeling of breadcrumbs in Angular is the way to go!

I am aiming to develop a breadcrumb navigation system with one element that changes dynamically. Here's an example: Home > Category A > Subcategory 1 > XYZ The categories "Category A" and "Subcategory 1" remain constant, while "XYZ" varies ...

angularangular-router

Combining type inference validation and authentication middleware in Express routes can be a powerful way to enhance security and ensure

I am struggling to grasp how types are automatically determined in Express routes when utilizing multiple middlewares. To conduct validation using zod, I have employed the middleware package express-zod-safe, although a similar issue arose with alternativ ...

typescriptexpresstypescript-typingstypescript-genericsmiddleware

Combining data types in TypeScript (incorporating new keys into an existing keyof type)

If I have a typescript type with keys: const anObject = {value1: '1', value2: '2', value3: '3'} type objectKeys = keyof typeof anObject and I want to add additional keys to the type without manually defining them, how can I ...

javascripttypescriptobjecttypeskeyof

Enhancing Angular 6: Transforming the Add Method to Perform Updates on the View

Currently, I am in the process of modifying a collection of data that is being shown on app.component.html <ul> <li *ngFor="let data of DataSource"> {{ data.id }} - {{data.title}} </li> </ul> So far, I have successfully ...

javascriptangulartypescriptangular6

Submitting the object in the correct format for the Firebase database

My goal is to structure the Firebase database in the following way: "thumbnails": { "72": "http://url.to.72px.thumbnail", "144": "http://url.to.144px.thumbnail" } However, I am struggling to correctly set the keys '72' and '144&apos ...

typescriptfirebasefirebase-realtime-database

Analyzing the object for interface compatibility

When I receive a query string in one of my REST endpoints using koa-router, each value of the query string object parameter is always a string: { count: "120", result: "true", text: "ok" } Within my codebase, I have an Interface that represents the ...

javascripttypescript

The name '__DEV__' is not discoverable at the moment

While working with the mobx library in my project, I encountered an issue after installing it using npm. Upon exploring the mobx/src/error.ts file within the node_modules folder, I came across a compile time error on line 78: const errors: typeof niceError ...

typescriptmobx

Is it possible to utilize the HttpXsrfInterceptor and HttpXsrfCookieExtractor classes for CSRF configuration in Angular 16, despite Intelli-J indicating that they do not exist?

In a valuable article about configuring CSRF for Angular, two options are outlined: First: opt for the default Csrf configuration: providers: [ { provide: HTTP_INTERCEPTORS, useExisting: **HttpXsrfInterceptor**, multi: true } ] Second: If you're usi ...

angular

Ensuring complete type safety by passing an object literal as a function parameter to a TypeScript type with rigorous type validation

I have a script written in JavaScript that I am currently converting to TypeScript. The code I am working with includes the following: const shapes = []; shapes.push({ name: 'Circle', radius: 12 }); shapes.push({ name: 'Rectangle', wid ...

typescript