Utilize the class or interface method's data type

Question

Utilize the class or interface method's data type

In the context of a child component calling a callback provided by its parent, this situation is commonly seen in AngularJS.
As I am utilizing TypeScript, I aim to implement strong typing for the callback in the child component.

Here is the initial state without any strong typings:

class ParentComponentController {
  public parentMethod(param1: number, param2: string): boolean {
    return param1 > 0 && param2.length > 2;
  }
}

class ChildComponentController {
  constructor(private parentMethod: Function) {}

  public onCertainTrigger() {
    this.parentMethod(10, 'something');
  }
}

This is how I can achieve strong typing, but it appears messy:

declare type parentMethod = (param1: number, param2: string) => boolean;

interface ICommonApi {
  parentMethod: parentMethod;
}

class ParentComponentController implements ICommonApi {
  public parentMethod(param1: number, param2: string): boolean {
    return param1 > 0 && param2.length > 2;
  }
}

class ChildComponentController {
  constructor(private parentMethod: parentMethod) { }

  public onCertainTrigger() {
    this.parentMethod(10, 'something');
  }
}

In an ideal scenario, I envision this being simplified into a one-liner. Is this feasible?

class ParentComponentController   {
  public parentMethod(param1: number, param2: string): boolean {
    return param1 > 0 && param2.length > 2;
  }
}

class ChildComponentController {
  // This leads to an error
  constructor(private parentMethod: ParentComponentController.parentMethod) {}

  public onCertainTrigger() {
    this.parentMethod(10, 'something');
  }
}

angularjs typescript

Answer 1

Answer №1

Presenting the solution:

class MainController {
  public mainFunction(param1: number, param2: string): boolean {
    return param1 > 0 && param2.length > 2;
  }
}

class SubController {
  constructor(private mainFunction: typeof MainController.prototype.mainFunction) {}

  public performAction() {
    this.mainFunction(10, 'example');
  }
}

Answer 2

Presenting the solution:

class MainController {
  public mainFunction(param1: number, param2: string): boolean {
    return param1 > 0 && param2.length > 2;
  }
}

class SubController {
  constructor(private mainFunction: typeof MainController.prototype.mainFunction) {}

  public performAction() {
    this.mainFunction(10, 'example');
  }
}

Answer 3

Answer №2

Here's a tip that may not be as concise, but will help you avoid the hassle of having to constantly update the parent method type:

let mainController: MainComponentController;

class SubComponentController {
    constructor(private parentFunc: typeof mainController.mainFunction) {}
}

Answer 4

Here's a tip that may not be as concise, but will help you avoid the hassle of having to constantly update the parent method type:

let mainController: MainComponentController;

class SubComponentController {
    constructor(private parentFunc: typeof mainController.mainFunction) {}
}

Answer 5

Answer №3

If you've already defined a type called parentMethod, you can implement it like this:

declare type parentMethod = (param1: number, param2: string) => boolean;

class ParentComponentController {

  //this is now a field with the type of parentMethod 
  public parentMethod: parentMethod = (param1: number, param2: string) =>
    param1 > 0 && param2.length > 2;
}

class ChildComponentController {
  constructor(private parentMethod: parentMethod) { }

  public onCertainTrigger() {
    this.parentMethod(10, 'something');
  }
}

new ChildComponentController(new ParentComponentController().parentMethod)
  .onCertainTrigger();

You can find the code example in this jsfiddle link: https://jsfiddle.net/sayan751/ttmzzkg9/

Answer 6

If you've already defined a type called parentMethod, you can implement it like this:

declare type parentMethod = (param1: number, param2: string) => boolean;

class ParentComponentController {

  //this is now a field with the type of parentMethod 
  public parentMethod: parentMethod = (param1: number, param2: string) =>
    param1 > 0 && param2.length > 2;
}

class ChildComponentController {
  constructor(private parentMethod: parentMethod) { }

  public onCertainTrigger() {
    this.parentMethod(10, 'something');
  }
}

new ChildComponentController(new ParentComponentController().parentMethod)
  .onCertainTrigger();

You can find the code example in this jsfiddle link: https://jsfiddle.net/sayan751/ttmzzkg9/

Answer 7

Answer №4

If you need to create a type alias within a namespace, although it may not be ideal, you can still make it work:

class MainController {
  public mainFunc(param1: number, param2: string): boolean {
    return param1 > 0 && param2.length > 2;
  }
}
namespace MainController {
      export type mainFunc = (number, string) => boolean;
}

class SubController {
  // This will throw an error
  constructor(private mainFunc: MainController.mainFunc) {}

  public onEvent() {
    this.mainFunc(10, 'example');
  }
}

Remember that interfaces and type aliases are not available during run-time; they are purely for design purposes.

Answer 8

If you need to create a type alias within a namespace, although it may not be ideal, you can still make it work:

class MainController {
  public mainFunc(param1: number, param2: string): boolean {
    return param1 > 0 && param2.length > 2;
  }
}
namespace MainController {
      export type mainFunc = (number, string) => boolean;
}

class SubController {
  // This will throw an error
  constructor(private mainFunc: MainController.mainFunc) {}

  public onEvent() {
    this.mainFunc(10, 'example');
  }
}

Remember that interfaces and type aliases are not available during run-time; they are purely for design purposes.

Answer 9

Answer №5

The fundamental objective of Generics and Generic Constraints is to define the connection between different types.

interface ISharedApi {
    sharedMethod(param1: number, param2: string): boolean;
}

class MainComponentController {
    public sharedMethod(param1: number, param2: string): boolean {
        return param1 > 0 && param2.length > 2;
    }
}

class SubComponentController<P extends ISharedApi> {
    constructor(private parent:P) { }

    public onSpecificEvent() {
        this.parent.sharedMethod(10, 'something');
    }
}

let m = new MainComponentController();
let s = new SubComponentController(m);

If the interface is basic:

class MainComponentController {
    public sharedMethod(param1: number, param2: string): boolean {
        return param1 > 0 && param2.length > 2;
    }
}

class SubComponentController<P extends { sharedMethod: (param1: number, param2: string) => boolean}> {
    constructor(private parent:P) { }

    public onSpecificEvent() {
        this.parent.sharedMethod(10, 'something');
    }
}

let m = new MainComponentController();
let s = new SubComponentController(m);

Answer 10

The fundamental objective of Generics and Generic Constraints is to define the connection between different types.

interface ISharedApi {
    sharedMethod(param1: number, param2: string): boolean;
}

class MainComponentController {
    public sharedMethod(param1: number, param2: string): boolean {
        return param1 > 0 && param2.length > 2;
    }
}

class SubComponentController<P extends ISharedApi> {
    constructor(private parent:P) { }

    public onSpecificEvent() {
        this.parent.sharedMethod(10, 'something');
    }
}

let m = new MainComponentController();
let s = new SubComponentController(m);

If the interface is basic:

class MainComponentController {
    public sharedMethod(param1: number, param2: string): boolean {
        return param1 > 0 && param2.length > 2;
    }
}

class SubComponentController<P extends { sharedMethod: (param1: number, param2: string) => boolean}> {
    constructor(private parent:P) { }

    public onSpecificEvent() {
        this.parent.sharedMethod(10, 'something');
    }
}

let m = new MainComponentController();
let s = new SubComponentController(m);

Answer 11

Answer №6

The recommended approach in the initial post is to use the 'messy' snippet. TypeScript best practices advocate for this method. It's important to note that parentMethod is a type, and enclosing it within a namespace like

ParentComponentController.parentMethod

doesn't serve any useful purpose.

This scenario aligns with the issue addressed in the manual under the Needless Namespacing section:

To emphasize why unnecessary namespacing should be avoided, namespaces are typically used for logical grouping of constructs and to prevent naming conflicts. Since the module file itself already acts as a logical group, and its top-level name is determined by the importing code, adding an extra layer of module for exported objects becomes redundant.

Despite technically being a form of namespace, designating a namespaced type like

ParentComponentController.parentMethod

goes against the principle of Occam's razor. This unnecessarily complicates the structure without offering any design advantages.

In addition to using I-prefixed interfaces, Hungarian notation employing T prefixes for custom types can be utilized. This practice is common in other object-oriented languages, particularly C# which TypeScript draws inspiration from. The official Coding guidelines document also mentions prefix usage specifically within TypeScript code, without restricting Hungarian notation elsewhere.

Hence, the preferred method remains consistent, potentially opting for TParentMethod instead of ambiguous parentMethod type for improved readability:

declare type TParentMethod = (param1: number, param2: string) => boolean;

interface ICommonApi {
  parentMethod: TParentMethod;
}

class ParentComponentController implements ICommonApi {
  public parentMethod(param1: number, param2: string): boolean { ... }
}

class ChildComponentController {
  constructor(private parentMethod: TParentMethod) { }
  ...
}

If a callback function type arises infrequently and does not necessitate a separate type definition, specifying the function signature explicitly is suitable:

class ChildComponentController {
  constructor(private parentMethod: (n: number, s: string) => boolean) { }
  ...
}

This approach offers sufficient redundancy to maintain code safety.

Answer 12

The recommended approach in the initial post is to use the 'messy' snippet. TypeScript best practices advocate for this method. It's important to note that parentMethod is a type, and enclosing it within a namespace like

ParentComponentController.parentMethod

doesn't serve any useful purpose.

This scenario aligns with the issue addressed in the manual under the Needless Namespacing section:

To emphasize why unnecessary namespacing should be avoided, namespaces are typically used for logical grouping of constructs and to prevent naming conflicts. Since the module file itself already acts as a logical group, and its top-level name is determined by the importing code, adding an extra layer of module for exported objects becomes redundant.

Despite technically being a form of namespace, designating a namespaced type like

ParentComponentController.parentMethod

goes against the principle of Occam's razor. This unnecessarily complicates the structure without offering any design advantages.

In addition to using I-prefixed interfaces, Hungarian notation employing T prefixes for custom types can be utilized. This practice is common in other object-oriented languages, particularly C# which TypeScript draws inspiration from. The official Coding guidelines document also mentions prefix usage specifically within TypeScript code, without restricting Hungarian notation elsewhere.

Hence, the preferred method remains consistent, potentially opting for TParentMethod instead of ambiguous parentMethod type for improved readability:

declare type TParentMethod = (param1: number, param2: string) => boolean;

interface ICommonApi {
  parentMethod: TParentMethod;
}

class ParentComponentController implements ICommonApi {
  public parentMethod(param1: number, param2: string): boolean { ... }
}

class ChildComponentController {
  constructor(private parentMethod: TParentMethod) { }
  ...
}

If a callback function type arises infrequently and does not necessitate a separate type definition, specifying the function signature explicitly is suitable:

class ChildComponentController {
  constructor(private parentMethod: (n: number, s: string) => boolean) { }
  ...
}

This approach offers sufficient redundancy to maintain code safety.

Utilize the class or interface method's data type

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Having difficulty accessing $scope beyond the function

Using private members to create getter and setter in TypeScript

Declaration of dependencies for NestJS must include dependencies of dependencies

Crack encrypted information using Typescript after it was encoded in Python

Can a reducer be molded in ngrx without utilizing the createReducer function?

Query params in the component router of Angular 1

An issue occurred in React 16.14.0 where the error "ReferenceError: exports is not defined" was not properly

How can we transform the `toUSD(amount)` function into a prototype function?

Manually assigning a value to a model in Angular for data-binding

The Angular Animation constantly resets with each new action taken

Create a custom validation function that accepts additional parameters

Error: An unexpected character (.) was encountered | Building with npm has failed

AngularJS uses double curly braces, also known as Mustache notation, to display

Error: Disappearing textarea textContent in HTML/TS occurs when creating a new textarea or clicking a button

How to pass an array as parameters in an Angular HTTP GET request to an API

Disable the submit form in AngularJS when the start date and end date are not valid

How can I clear a text box in Angular.js when the Google Autocomplete event is triggered?

Enhance Graphql Queries with TypeOrm using Dynamic Filters

Tips for integrating Typescript into a pre-existing Vue 3 project

Leverage Angular's template functionality