Describe function signature using an interface
See original GitHub issueSearch Terms
function implements interface
Suggestion
Allow functions to indicate interfaces that they implement, allowing usage of a function interface.
Properties defined on an interface would not be possible unless they are defined as optional
Use Cases
When using function overloads, the return type is defined as any
, this would allow the return type to be guarded and not use any
. Referencing: https://www.typescriptlang.org/docs/handbook/functions.html#overloads
It would also allow optional properties to be defined on a function without doing type gymnastics.
Examples
interface CoolFunction {
(first: string, second: number): number;
(first: number, second: string): string;
property?: boolean;
}
// args will be of type [string, number] | [number, string]
function coolFunction(...args) implements CoolFunction {
if (typeof args[0] === "string") {
// We're now reduced our type of args to [string, number]
return args[1];
} else {
// args can only be [number, string]
return args[1];
}
}
// This property is known as it is defined on the interface
coolFunction.property = true;
Checklist
My suggestion meets these guidelines:
- This wouldn’t be a breaking change in existing TypeScript/JavaScript code
- This wouldn’t change the runtime behavior of existing JavaScript code
- This could be implemented without emitting different JS based on the types of the expressions
- This isn’t a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
- This feature would agree with the rest of TypeScript’s Design Goals.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:72
- Comments:13 (5 by maintainers)
Top Results From Across the Web
Handbook - Interfaces
To describe a function type with an interface, we give the interface a call signature. This is like a function declaration with only...
Read more >TypeScript Interface / Type for Function Signature
I guess this's as best as it can get: type MyFunction = ( firstName: string, lastName: string, age: number, city: string, country: string, ......
Read more >TypeScript - Using Interfaces to describe Functions
We just need to define function signature in the interface. Let's understand that with an example.
Read more >Signature (functions) - MDN Web Docs Glossary: Definitions of ...
A function signature (or type signature, or method signature) defines input and output of functions or methods.
Read more >method-signature-style - typescript-eslint
Enforce using a particular method signature syntax. ... TypeScript provides two ways to define an object/interface function property: interface Example {
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I came across this problem back a while ago and after a little research I found this thread. I want to add that, this issue is super important when it comes to typing React components that have a generic type. because in that situation, there is no way to type the component using the arrow function + React.FC interface:
(in the above example, we don’t have access to the function generic type at the point of declaring the MyComponent Type so the
FC<Props<T>>
errors)So we have to use the function form, but by doing that, we won’t be able to use the
FC
interface anymore so we have to do this:It isn’t that beautiful, but it wouldn’t matter if it worked. even with this syntax, we won’t get proper type check for things like
Component.propTypes
andComponent.defaultProps
. So we also have to add the definitions manually for each one of them (we can’t use the alias declaration trick in this case because that way there is no way to get the generic type).So after all, it would be great if typescript had first-class support for this kind of situation. I’d love to be able to do something like this:
@RyanCavanaugh any status update on this one?