Retrieve the implementation of an interface method directly from the constructor of the class that implements it

I am looking to create a function that takes a string and another function as arguments and returns a string:

interface Foo {
  ConditionalColor(color: string, condition: (arg: any) => boolean): string;
}

I attempted to pass the ConditionalColor method into an implementing class using its constructor:

class FooImpl implements Foo {
  ConditionalIconColor(color: string, condition: (arg: any) => boolean): string;

  constructor(
    ConditionalColor: (color:string, condition: (arg: any) => boolean) => string
  ) {
    this.ConditionalIconColor = ConditionalColor
  }

An error is popping up saying:

Function implementation is missing or not immediately following the declaration.

I'm unsure if it's a syntax issue or if the approach I'm taking is invalid. Any advice or ideas would be greatly appreciated!

Thank you!

Answer №1

Since there is no design-time implementation available, it's recommended to define the function as a property.

Additionally, there seems to be a typo in the function names. I have corrected it to "ConditionalColor".

interface IFoo {
  ConditionalColor(color: string, condition: (arg: any) => boolean): string;
}

class Foo implements IFoo {
  constructor(
    ConditionalColor: (color:string, condition: (arg: any) => boolean) => string
  ) {
    this.ConditionalColor = ConditionalColor;
  }

  ConditionalColor: (color: string, condition: (arg: any) => boolean) => string;
}

Take note of the distinction between your original version (first) and mine (second)

ConditionalColor(color: string, condition: (arg: any) => boolean): string;
ConditionalColor: (color: string, condition: (arg: any) => boolean) => string;

Your code was trying to declare a function without a body, whereas mine declares a property with a type that accepts arguments and returns a value.

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

Issue encountered when attempting to establish a new loadingController with LoadingOption

Hey there, I am relatively new to Ionic and I encountered an issue while trying to create a new loading screen. Argument of type '{ content: string; }' is not assignable to parameter of type 'LoadingOptions'. Object literal may only s ...

Distribute the capabilities of the class

Is there a way to transfer the functionalities of a class into another object? Let's consider this example: class FooBar { private service: MyService; constructor(svc: MyService) { this.service = svc; } public foo(): string { ...

Tips for successfully passing a closure as a parameter in a constructor

I encountered an issue while working with a third-party library where I needed to register my own control. The problem arose when I tried to add another dependency to the control and struggled with passing a closure as a parameter to fulfill the required c ...

Encountered a hiccup during the deployment of an Angular application on Heroku

I've been working on deploying an Angular app called "test-app" to Heroku via GitHub and everything seems to be going smoothly, except for setting up the express routing function. I've tried different paths, but Heroku keeps throwing this error: ...

React validation functionalities

Incorporating React, I am attempting to implement a validation feature within a footer containing multiple buttons with unique values such as home, orders, payments and more. My goal is to dynamically display an active state for the button corresponding to ...

Unraveling the art of utilizing the map operator in ES6 with condition

I need to implement a condition within the map function where I prepend zeros for single digit values (00.00 to 09.30), while leaving remaining values unchanged. Currently, it is prepending zeros for all values. Here is the code: export class SelectOver ...

Issue: Missing provider for t specifically when running in production mode

I've been researching and found that missing modules or services could be the cause of this issue, but I have double-checked and everything seems to be in order. Here is the complete error message: vendor.96643eaf6ee79e7b894d.bundle.js:1 ERROR Error ...

deleting the existing marker before placing a new marker on the Mapbox

Upon the map loading with GeoJson data, I have implemented code to display markers at specified locations. It works flawlessly, but I am seeking a way to remove previous markers when new ones are added. What adjustments should be made for this desired func ...

What could be causing the service method in the controller not to be called by Node JS?

In my current Node JS project, the folder structure of my app is as follows: src │ index.js # Main entry point for application └───config # Contains application environment variables and secrets └───controllers # Hou ...

Authenticating users with Facebook using Ionic, Angular, Capacitor, and Firebase, as well as implementing role-based authentication

I successfully implemented Facebook authentication in my Android app using Ionic, Angular, Capacitor, and Firebase. The authentication is fully functional. What I attempted: Implementing role-based authentication. My solution: Storing the user's Face ...

Transform a string into title case and eliminate any special characters in Angular 6

I've written some code that displays text in title case using a pipe. {{person.name| titlecase}} Now, I want to create another filter or pipe that will remove special characters from the string and only keep numbers and letters. For example: "john ...

Angular CDKScrollable not triggering events

I'm having trouble making the angular CdkScrollable work when creating my own div: <div class="main-section" id="mainsection" #mainsection CdkScrollable> <div class="content" style="height: 300px; backgr ...

Tips for accessing child elements within an Angular component

I'm struggling to get a reference of child elements within a component. I have experimented with ElementRef, TemplateRef, QueryList, ViewChild, ViewChildren, ContentChild, and ContentChildren without success. <app-modal> <section #referenc ...

What is the reason for the regeneration of the 2D array?

I have a method called generateWeights() that retrieves random values in an array; And a method named learn() that calls the changeWeights() method to alter the values in the array. Expected: Prior to invoking the learn() method, I anticipate receiving an ...

How can I save a TypeScript object to Firebase using serialization?

Having an issue: Within my angular application, I have implemented a lot of classes with inheritance. However, upon attempting to save these objects to Firebase, I encountered an error indicating that I am trying to persist custom objects which is not supp ...

Struggling to implement mock JSON data, unable to dynamically update on HTML page

Although the data is being displayed, I am facing issues with getting the images to appear correctly based on the syntax and code. https://i.sstatic.net/ip4kp.png <h2>Amazing Places on Earth</h2> <div class="card"> <div class=" ...

Integrate child component properties within the parent component

Looking to create a wrapper component that selects specific props from an inner component and includes additional custom props. The issue is that using pick will generate a type rather than an interface, limiting the ability to add more keys. How can I wor ...

Display the initial x list items without utilizing ngFor in Angular 2

In the template, there are 9 <li> elements, each with a *ngIf condition present. It is possible that 5 or more of them may return true, but the requirement is to only display the first 4 or less if needed. Priority is given to the order of the < ...

Angular 4 is having trouble retrieving the JSON response

When I attempt to log errors in a specific scenario and use error, the following error message is displayed: { "errors" : [ { "entity" : "Movement", "property" : "direction", "invalidValue" : null, "message" : "Il campo non può essere v ...

Looking to incorporate Functional Components in React using the package "@types/react" version "^18.0.17"? Learn how here!

With the removal of the children prop from React.FC type, what is the new approach for typing components? ...