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

Question

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!

angular typescript

Answer 1

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.

Answer 2

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.

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

Answer №1

Similar questions

I am attempting to incorporate an NPM package as a plugin in my Next.js application in order to prevent the occurrence of a "Module not found: Can't resolve 'child_process'" error

I'm having trouble retrieving my variable within the socketcluster's socket.on function

Understanding the Typescript Type for a JSON Schema Object

Unleashing the Power of Firebase Service in Angular Components: A Guide to Effective Unit Testing

Looking to receive detailed compiler error messages along with full imports in Visual Studio Code for TypeScript?

There is no valid injection token found for the parameter 'functions' in the class 'TodosComponent'

Generating data types based on the output of functions

Is it possible to integrate @google-cloud/logging into an Ionic4/Angular8/Firebase client application? Tips for resolving module import issues

Make sure to incorporate the .gitignored files that are compiled from typescript when running the `npm install -g

Unusual Observable behavior in Angular/Typescript leaves developers scratching their heads

I'm puzzled as to why my createDoorMethod is returning a string value instead of a number, even though I am passing it a number. Can someone help me

Keeping track of important dates is ineffective using the calendar

The Angular project encounters a failure when attempting to run 'ng serve,' resulting in an emitted 'error' event on the worker

What is the correct way to utilize Array.reduce with Typescript?

The use of data binding can lead to the error known as ExpressionChangedAfterItHasBeen

Angular Component - Array missing initial value in @Input property

Issue with file upload controller in .net core 2.2 and Angular 7: IFormFile always returns null

Having trouble with ng-repeat in AngularJS after including Angular 17 web components to index.html?

How can I effectively utilize the Angular router to share routes among various named outlets?

The CSS transition timing seems to be malfunctioning as not all elements are smoothly transitioning, specifically the text within the li and anchor tags is not