How to Declare a Non-Arrow Function in TypeScript Interface

Описание: Learn how to define a function type in a TypeScript interface that uses a non-arrow function style for better implementation flexibility.
---
This video is based on the question https://stackoverflow.com/q/68635226/ asked by the user 'peco123' ( https://stackoverflow.com/u/16315294/ ) and on the answer https://stackoverflow.com/a/68636721/ provided by the user 'Алексей Мартинкевич' ( https://stackoverflow.com/u/9636526/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How can I declare a function definition type which is a non-arrow function?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Declare a Non-Arrow Function in TypeScript Interface

When working in TypeScript, you may face situations where you want to define methods within an interface but prefer to implement them as traditional function declarations rather than using arrow functions. This can enhance clarity and maintain better customization for method behavior in classes. In this guide, we will explore how to achieve this specific requirement by providing a solution for function declarations within an interface.

The Problem

You have an interface called Autocomplete in which you would like to declare a method that filters options. Initially, the method is declared using an arrow function syntax:

[[See Video to Reveal this Text or Code Snippet]]

However, when you implement your interface, you find that the implementation is also being interpreted as an arrow function:

[[See Video to Reveal this Text or Code Snippet]]

You desire the ability to implement the method as a non-arrow function, for instance:

[[See Video to Reveal this Text or Code Snippet]]

Now, let’s delve into how we can adjust the declaration in your interface to achieve this aim.

The Solution

To define a method in your interface that leads to a non-arrow functionality, you'll want to adjust the syntax of your method declaration within the interface itself. Below is the required syntax to produce a non-arrow function in TypeScript interfaces.

Step 1: Update the Interface Declaration

Modify your Autocomplete interface as follows:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Implement the Interface in a Class

Next, when you're implementing this interface in a class, you'll do it using the traditional function declaration approach:

[[See Video to Reveal this Text or Code Snippet]]

Breakdown of the Implementation:

Function Declaration in Interface: By specifying the method as filterOptions(name: string): any[];, you are informing TypeScript that this method will accept a string parameter name and will return an array of any type.

Class Implementation: The method implementation in the class now uses the traditional function declaration style that you preferred. Inside this implementation, you can add your logic to filter the options based on the name parameter.

Conclusion

By changing the way you declare your method in the interface, you can implement flexible and clear function definitions in your TypeScript code. This method not only helps maintain readability but also provides customization capabilities as necessary.

Now, you have everything you need to successfully declare and implement a non-arrow function in your TypeScript interfaces! Happy coding!