How to implement a Typescript interface without necessarily implementing the parent interfaces

Within my current project, I have defined the following interfaces:

interface foo {
  fooProperty: number;
  fooFunction(): void;
}

interface bar extends foo {
  barProperty: string;
  barFunction(): void;
}

Now, I am interested in creating a class like this:

class myBar implements bar {
  public barProperty: string = "bar";
  public barFunction() {
    // perform some action
  }
}

However, I want to avoid implementing the properties and functions of foo as they are already specified in an existing JS class that is described by the interfaces.

Essentially, I aim to develop a TypeScript class that extends a third-party JS library for which I have ".d.ts" files outlining the implementation details but is not originally written in TypeScript.

In order to utilize a specific function within the third-party library, I need to create a customized class that inherits from a provided JS class using "prototype", but I must accomplish this task using TypeScript.

Update 1

It appears that there may be some confusion regarding my objective, so let me provide further clarification.

Within our project, we make use of a third-party JS library, referred to as "thirdLib.js".

Inside "thirdLib.js", there is functionality that necessitates extending a JS-style class included in "thirdLib.js" in the following manner:

function myClass(){
  thirdlib.thirdclass.call(this);
}

thirdLib.utilities.extendclass(myClass, thirdLib.thirdClass);

myClass.prototype.overriddenFunc = function(){
  // Implement custom function here
}

The "extendClass" method in "thirdlib" copies the constructor of the base class into my constructor, or at least that is my understanding.

Later on, within "thirdlib.js", this extended class is employed somewhere else like so:

var myStuff = new thirdLib();
var theClass = new myClass();

myStuff.registerSomething(theClass);
myStuff.doAThing();

Upon calling "doAThing", the newly registered JS class in "thirdLib.js" possesses all the original functionalities from "thirdClass" along with my customizations.

I only have access to the minified JavaScript code of "thirdLib.js" and a set of self-authored TypeScript definition files. My goal is to construct "myClass()" using standard TypeScript features while inheriting and utilizing the entirety of the original JS class and integrating my additional functionalities into the TS class to override those in the underlying JS class when needed.

Update April 2022

To address any inquiries, approximately six months after my previous comment, I departed from the company associated with this project. Consequently, I do not possess the code or accessibility to it anymore, thus I doubt the matter will reach a resolution. For those intrigued, the "Custom Drawing Handler" I attempted to implement was a personalized drawing class for a previously commercial (now open-source) third-party JS library known as "MXGraph".

Answer №1

It seems like you just need to extend the myFoo class with your myBar class in order to inherit the existing implementation and meet the requirements specified in the interface.

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

Tips on creating an object within a TypeScript interface

As a newcomer to Type Script, I am curious if there is a way to specify in the interface "IIndex" that SystemStatus is an object with properties Data and DataUrl. Currently, it appears that SystemStatus is undefined. interface IIndex extends ng.IScope { ...

Can someone provide a description for a field within typedoc documentation?

Here is the code snippet: /** * Description of the class */ export class SomeClass { /** * Description of the field */ message: string; } I have tested it on the TSDoc playground and noticed that there is a summary for the class, but not for it ...

JavaScript: CryptoJS does not have the SHA1 method implemented

This seems like a simple issue to resolve.... Although my CryptoJS object is present, it appears to be lacking a SHA1 method. What steps should I take to rectify this? Despite various examples available, my specific case remains unresolved... On a posit ...

Validating patterns in Angular without using a form

Seeking guidance on validating user input in Angular6 PrimeNG pInputText for a specific URL pattern, such as , possibly triggered on blur event. This particular field used to be part of a form but has since been relocated to a more complex 6-part form int ...

What is the best way to incorporate an expression into a package.json file?

Query: Is there a way to automatically increase the version in a script message? I need my release message to always be one version higher than the previous. Aim: For example, if I have version **0.1.2**, I would like to update my commit message to 0.1.3 ...

A guide on updating various states using React Hooks

Creating a background component with the use of Vanta in NextJS, here's the code snippet: import { useEffect, useRef, useState } from "react"; import * as THREE from "three"; import FOG from "vanta/dist/vanta.fog.min"; im ...

Retrieving information from the backend using JavaScript

Utilizing devexpress JS Charts requires data to be in the format: [{ category: 'Oceania', value: 35 },{ category: 'Europe', value: 728 }] To achieve this format, I convert a DataTable to JSON in my backend code after running queries b ...

What is the best method for integrating addEventListener with Javascript functions located in a different file?

I currently have document.addEventListener('DOMContentLoaded', functionName); which uses the function below: function functionName() { $.ajax({ type: 'GET', url: '/populatePage', success: function(data) { ...

Selecting a radio button by clicking on its corresponding label within an Angular Material dialog

I recently implemented a custom rating bar in Angular, which worked perfectly fine in a basic component. However, when I tried to move it to a MatDialog component, I encountered some issues. In the initial setup, my input was set to display: none so that t ...

Like the Word outline view, the list view can be easily collapsed and expanded with a simple click

I've seen a few examples, but I haven't been able to achieve what I'm looking for. I need to extract text from a field and convert it into an outline view similar to the one in Word. Is this possible? Any help would be greatly appreciated. I ...

Experiencing difficulties while attempting to organize an array?

// const first = data.groups_with_selected[7]; // const second = data.groups_with_selected[20]; // data.groups_with_selected.splice(2, 0, first, second); // data.groups_with_selected.splice(9, 1) // data.groups_with_selected ...

Encountering an issue when using both the Google Maps API and Google URL Shortener API within the same program

Recently, I developed a program that involves passing data to an iframe through a URL. However, due to the limitation of Internet Explorer supporting only 2083 characters in a URL, I decided to use the Google URL Shorten API to shorten the URL before sendi ...

When using jQuery's .text() method, it updates the "source" content without affecting the actual DOM

Here is a scenario I am working on with jQuery: When the user clicks on a div An ajax call is triggered to save data in the database After receiving the callback, an update message is displayed <--everything good until here Now, if the user clicks on ...

Varying heights based on the screen size

Currently, I am in the process of designing my website and incorporating some wave elements to enhance the background. However, I've encountered some issues when resizing the screen. Specifically, the waves seem to shift with a space between them as t ...

Tips for showcasing a Bootstrap alert

I'm attempting to integrate Bootstrap Alerts into my project, but I'm struggling to display them programmatically. Here is the HTML snippet: <div class="alert alert-success alert-dismissible fade show" role="alert" id="accepted-meal-al ...

JavaScript EasyBitConverter

Looking to create a basic C# BitConverter equivalent in JavaScript, I've developed a simple BitConverter implementation. class MyBitConverter { constructor() {} GetBytes(int) { var b = new Buffer(8); b[0] = int; b ...

Determine the conditional type based on the type of another variable

function updateFilterData( mode: 'PaymentType' | 'Origin' | 'Destination', value: string, ) { } I need to modify this function so that when mode is 'Origin' | 'Destination', the value should b ...

Ways to initiate animation using CSS when the page loads

Is there a way to initialize the counter on page load? Even though I was successful in making it start on hover, I couldn't figure out how to make it work when the page loads. Here is the JavaScript code: var root = document.querySelector(':root ...

Dealing with errors in Express.js within the service or controller layers

Currently, I am developing an Express.js application with a distinct controller layer and service layer. Below you can find the code snippet I have implemented so far: user.service.js exports.registerUser = async function (email, password) { const hash ...

JavaScript Pagination and JSON Concerns in Coding Techniques

Currently, I am pre-caching a dataset with a maximum limit of 500. The Ajax request fetches all the data at once, allowing for front loading and pagination. Everything works fine this way. However, we are in the process of transitioning our backend archit ...