What is the best way to broaden the capabilities of function objects through the use of

Question

What is the best way to broaden the capabilities of function objects through the use of

Below is a code snippet that raises the question of how one should define certain types. In this scenario, it is required that Bar extends Foo and the return type of FooBar should be 'a'.

interface Foo { 
    (...args: any):any
    b: string
}

interface Bar<T extends string> extends Foo {
     (a:T):T
     b: T 
}
// The type of BarA below should be:
// {
//    (a:'a'):'a'
//    b: 'a' 
// } - Does this seem correct?
type BarA = Bar<'a'> 

type FooBarWorks = BarA['b'] // Output expected as 'a'
type FooBar = ReturnType<BarA> // Why does this result in 'any' instead of 'a'?

code link

Could someone provide an explanation as to why this code does not function as anticipated?

Thank you.

EDIT: The following solution addresses the issue:

type Bar<T extends string> = {
     (a:T):T
     b: T 
} extends infer O extends Foo ? O : never

But what is the reason for the interface solution mentioned above not working?

typescript

Answer 1

Answer №1

Based on your specific types, BarA is essentially:

type BarA = {
    (a: "a"): "a";
    (...args: any): any;
    b: "a"
}

When you extend an interface with a call signature and add another call signature, the resulting type will have two call signatures. The new call signature does not replace the old one but is appended as the first call signature in an overloaded function type.

You can confirm this yourself by testing:

declare const barA: BarA;
const aRes = barA("a"); // (a: "a") => "a" (+1 overload)
// const aRes: "a"
const bRes = barA("b"); // (...args: any) => any (+1 overload)
// const bRes: any

Subsequently, ReturnType<BarA> will provide the return type of one of those two call signatures. The ReturnType feature uses conditional type inference as outlined in microsoft/TypeScript#21496, where:

When inferring from a type with multiple call signatures (such as the type of an overloaded function), inferences are made from the last signature

Hence, the last call signature, which is (...args: any) => any, determines the return type to be any:

type FooBar = ReturnType<BarA> 
// type FooBar = any

If your intention was to override the call signature rather than overload it, that is not directly supported by TypeScript. An alternative approach is to extend Foo indirectly, by using Foo excluding the call signature:

interface Bar<T extends string> extends Pick<Foo, keyof Foo> {
    (a: T): T
    b: T
}

This way, you will receive a Bar with a single call signature matching the expected format:

type BarA = Bar<'a'>
/* type BarA = {
    (a: "a"): "a";
    b: "a"
}*/

The behavior of ReturnType will align with your expectations:

type FooBar = ReturnType<BarA>
// type FooBar = "a"

Link to code on Playground for your reference

Answer 2

Based on your specific types, BarA is essentially:

type BarA = {
    (a: "a"): "a";
    (...args: any): any;
    b: "a"
}

When you extend an interface with a call signature and add another call signature, the resulting type will have two call signatures. The new call signature does not replace the old one but is appended as the first call signature in an overloaded function type.

You can confirm this yourself by testing:

declare const barA: BarA;
const aRes = barA("a"); // (a: "a") => "a" (+1 overload)
// const aRes: "a"
const bRes = barA("b"); // (...args: any) => any (+1 overload)
// const bRes: any

Subsequently, ReturnType<BarA> will provide the return type of one of those two call signatures. The ReturnType feature uses conditional type inference as outlined in microsoft/TypeScript#21496, where:

When inferring from a type with multiple call signatures (such as the type of an overloaded function), inferences are made from the last signature

Hence, the last call signature, which is (...args: any) => any, determines the return type to be any:

type FooBar = ReturnType<BarA> 
// type FooBar = any

If your intention was to override the call signature rather than overload it, that is not directly supported by TypeScript. An alternative approach is to extend Foo indirectly, by using Foo excluding the call signature:

interface Bar<T extends string> extends Pick<Foo, keyof Foo> {
    (a: T): T
    b: T
}

This way, you will receive a Bar with a single call signature matching the expected format:

type BarA = Bar<'a'>
/* type BarA = {
    (a: "a"): "a";
    b: "a"
}*/

The behavior of ReturnType will align with your expectations:

type FooBar = ReturnType<BarA>
// type FooBar = "a"

Link to code on Playground for your reference

What is the best way to broaden the capabilities of function objects through the use of

Answer №1

Similar questions

The compilation time of Webpack and Angular 2

Angular 2 Popup Modal Issue: "Expression modified after checking"

How can one determine the data type by analyzing the key value?

Angular offers a range of search filters for optimizing search results

Are all components in Next.js considered client components by default?

React 18 Fragment expressing concern about an excessive amount of offspring

Accessing node_modules in TypeScript within an Asp.Net Core application

Using React with Typescript: How to pass a function as a prop to a child component and call it from within

Creating a new list by grouping elements from an existing list

Convert a regular element into a DebugElement within an Angular framework

Encountering an ERROR with the message "Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError" while attempting to apply a filter to

Setting up types for variables in Angular 2 componentsHere is an

Inheriting Angular components: How can the life cycle hooks of a parent component be triggered?

In TypeScript, deduce the optional generic type automatically

Angular 5 is rendering a div even if there is no content present

Can anyone tell me the best way to access the name attribute of an HTML element in TypeScript?

Using axiosjs to send FormData from a Node.js environment

Issue: Generated JavaScript files not visible in Visual Studio when using TypeScript.Explanation: When working with

Guide to making a Typescript type guard for a ReactElement type

API endpoint generating a Vue component as a rendered output