I'm having trouble with TypeScript locating a method specified in a parent class's type definition. What might be causing this issue?

While working with JointJS, I came across the defined typings. In my Typescript class, the structure is as follows:

namespace joint {
    namespace shapes {
        namespace devs {
            class Model extends basic.Generic { ... }
        }
    }
}

namespace basic {
    class Generic extends dia.Element { ... }
}

namespace dia {
    class Element extends Cell { ... }
    class Cell extends Backbone.Model { ... }
}

namespace Backbone {
    class Model extends ModelBase {
    ...
    defaults(): ObjectHash;
}

According to this setup, joint.shapes.devs.Model should inherit the 'defaults' property from

Generic <- dia.Element <- dia.Cell <- Backbone.Model

However, when attempting to extend this object:

const extendedModel = joint.shapes.devs.Model.extend(
    ...
), joint.shapes.devs.Model.defaults);

...Typescript indicates that 'defaults' property is not defined in joint.shapes.devs.Model:

error TS2339: Property 'defaults' does not exist on type 'typeof Model'.

I also tried invoking a method instead of the property:

const extendedModel = joint.shapes.devs.Model.extend(
    ...
), joint.shapes.devs.Model.defaults());

However, the same error message persists.

I am currently using Typescript 2.7.2

Therefore, my question is: what could be causing this issue? How can I resolve it?

Thank you!

Answer №1

The defaults attribute isn't found on the Model type as you're suggesting; rather, it belongs to a specific instance of Model, meaning the object created with new Model. Without an instance, these properties hold no meaning.

Let's examine the definition of the extend() method:

public static extend(properties: any, classProperties?: any): any;

So, the variable being passed here is used as the classProperties. It appears that this parameter represents the static properties that can be accessed using extendedModel.propName. If you don't plan on utilizing this syntax, you can simply omit this argument since it's optional.

Lastly, if you're comfortable with ES6 classes, it's advised to utilize them (as mentioned in the comment within the definition). In such a scenario, your objective could be achieved like so:

class extendedModel extends joint.shapes.devs.Model {
    // new properties go here
}

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

Async function is improperly updating the array state by overwriting it completely instead of just updating one item as

I am working on a file upload feature where each uploaded file should have a progress bar that updates as the file gets uploaded. I'm using a state to keep track of selected files and their respective progress: interface IFiles { file: File; c ...

After importing this variable into index.ts, how is it possible for it to possess a function named `listen`?

Running a Github repository that I stumbled upon. Regarding the line import server from './server' - how does this API recognize that the server object has a method called listen? When examining the server.ts file in the same directory, there is ...

Make sure to implement validations prior to sending back the observable in Angular

Each time the button is clicked and if the modelform is invalid, a notification message should be returned instead of proceeding to create a user (createUser). The process should only proceed with this.accountService.create if there are no form validation ...

Can you explain the variances between the two Pick<T,K> util type implementations?

Here is a link I am exploring: https://github.com/type-challenges/type-challenges/blob/master/questions/4-easy-pick/README.md I am struggling to grasp the distinction between these two code snippets: type MyPick<T, K> = T extends {} ? K extends keyo ...

When a card is clicked in the parent component, data is sent to the child component in Angular. The card contains an image, name, ID,

How can I pass data from a parent component (nfts) to a child component (main) when a card is clicked? The card contains images, ids, names, and more information. I've attempted using @Input() but haven't been able to receive the value in the ch ...

Make sure that the input for a function is a valid key within a specific interface, and that the corresponding value in the interface is

I'm a beginner in TypeScript and I've hit a roadblock with this issue. Despite searching extensively, I haven't found a solution yet. My goal is to create a well-typed sorting function that takes two parameters: an array of objects and the ...

Module 'bcryptjs' could not be located

Recently, I added the @types/bcryptjs package to my Node.js project. Initially, there were no issues with importing it. However, when I attempted to use it in my code by including the line: console.log(bcrypt.hashSync(req.body.password)) I encountered an ...

The concept of a singleton design pattern is like a hidden treasure waiting to be

My approach to implementing the singleton pattern in a typescript ( version 2.1.6 ) class is as follows: export class NotificationsViewModel { private _myService: NotificationService; private _myArray: []; private static _instance: Notificatio ...

What is the method for typing an array of objects retrieved from realmDB?

Issue: Argument type 'Results<Courses[] & Object>' cannot be assigned to the parameter type 'SetStateAction<Courses[]>'. Type 'Results<Courses[] & Object>' lacks properties such as pop, push, reverse, ...

Obtain redirected JSON data locally using Angular 5

Currently, I am working on retrieving JSON data which will be sent to my localhost through a POST method. The SpringBoot API controller will validate the JSON content before forwarding it to my localhost. My task is to intercept this JSON data when it is t ...

Empty nested Map in POST request

I am currently working on a springboot application with a React/Typescript frontend. I have defined two interfaces and created an object based on these interfaces. export interface Order { customer_id: number; date: Date; total: number; sp ...

Is it possible for TypeScript to automatically determine the specific type that was used in a union type parameter?

I need some help with a utility function I'm working on that can remove a specified number of elements from either a string or an array. My goal is to have the compiler determine whether the return value should be a string or an array based on what is ...

Exploring Computed Properties in Angular Models

We are currently in the process of developing an application that involves the following models: interface IEmployee{ firstName?: string; lastName?: string; } export class Employee implements IEmployee{ public firstName?: string; public l ...

Upon upgrading to Angular 8, the function this._delegate.setNgStyle is not recognized

Following the update of my project from Angular 7 to Angular 8 and resolving all errors caused by breaking changes, I am encountering a new issue: <div fxFill ngStyle.xs="overflow:auto"> This line is resulting in the following error: ERROR Type ...

Is there a way to deactivate a tab when it's active and reactivate it upon clicking another tab in Angular?

<a class="nav-link" routerLink="/books" routerLinkActive="active (click)="bookTabIsClicked()" > Books </a> I am currently teaching myself Angular. I need help with disabling this tab when it is active ...

JavaScript: Manipulating Data with Dual Arrays of Objects

//Original Data export const data1 = [ { addKey: '11', address: '12', value: 0 }, { addKey: '11', address: '12', value: 0 }, { addKey: '12', address: '11', value: 0 }, { addKey: &a ...

Having trouble getting the styles property to work in the component metadata in Angular 2?

Exploring Angular 2 and working on a demo app where I'm trying to apply the styles property within the component metadata to customize all labels in contact.component.html. I attempted to implement styles: ['label { font-weight: bold;color:red } ...

attempting to pass a boolean type through props resulting in a type error

Hey, check out this component I created: import * as Styled from './styles'; export type HeadingProps = { children: React.ReactNode | string; colorDark: boolean; }; export const Heading = ({ children, colorDark }: HeadingProps) => { re ...

Error TS2304: Unable to locate identifier 'RTCErrorEvent'

I am currently working on a WebRTC application using Quasar, typescript and Vue. In my code snippet below, I am encountering an issue where I don't get any errors in WebStorm (as it uses the project's eslint config), and I can navigate to the def ...

Is it possible for a redis client to function without having a redis datastore installed?

Currently in my node web server, I am utilizing the npm module known as redis. Upon executing my code... const client = redis.createClient(); client.on("error", function (err) { console.log("Error " + err); }); client.hmset(["key", "test keys 1", "t ...