Generics are lost during Function.prototype.bind() and Function.prototype.call()

Suggestion

🔍 Search Terms

generic, bind, call

✅ Viability 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, new syntax sugar for JS, etc.)
This feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

Currently, binding or calling a function loses its generics. Suggestion: Don't lose the generic.

📃 Motivating Example

Let's say I have a generic function getMediaAd

export async function getMediaAd<T extends Ad>(
	this: Client,
	params: { locale?: string; media_id: string; format: T['format'] },
) {
	const url = this.cmsUrl(`api/ads/random`, params)
	if (!params.locale) url.searchParams.set('locale', this.locale)
	return this.get<T>(url, this.cmsHeaders())
}

This function can obtain multiple types of ad formats, determined by T.

I want to put this function inside a Client class to access some client-specific features.

export class Client {
	getMediaAd = getMediaAd.bind(this)
}

However, when I do that, this.getMediaAd loses its generic parameter.

Losing the generic parameter means I can't tell it what is T supposed to be, like this:

export async function getMediaBillboardAd(
	this: Client,
	params: { locale?: Intl.UnicodeBCP47LocaleIdentifier; media_id: string },
) {
	return this.getMediaAd<AdBillboard>({ ...params, format: adFormat.billboard })
}

Here, T is AdBillboard. However, getMediaAd expects 0 generic parameters.

💻 Use Cases

I want to use this to create an API wrapper client, but keep the ability to declare functions in different files.

Related to #47899. Currently #27028 and #28920 don't cover all possible cases with generics. Maybe the suggestion is to do something #30215-like with bind/call/apply?

If we're being honest here, you guys are frighteningly smarter than me. I get lost literally five words in in any of these discussions.

Basically, what I want is for the bound function to have the same signature (including generics) as the original function.

I have a minimal reproduction sample here:

type AdType = 'banner' | 'billboard'

interface BaseAd {
	type: AdType
}

interface BillboardAd extends BaseAd {
	type: 'billboard'
}

interface BannerAd extends BaseAd {
	type: 'banner'
}

type Ad = BannerAd | BillboardAd

/**
 * > function getAd<T extends Ad>(this: Client, type: T['type']): T
 */
function getAd<T extends Ad>(this: Client, type: T['type']): T {
	return this.get<T>({ type })
}

class Client {
	/**
	 * > (property) Client.getAd: (type: "banner" | "billboard") => Ad
	 *
	 * This type is incorrect; it should be:
	 * ```ts
	 * (property) Client.getAd: <T extends Ad>(this: Client, type: T['type']): T
	 * ```
	 */
	getAd = getAd.bind(this)
	getBannerAd = getBannerAd.bind(this)
	getBillboardAd = getBillboardAd.bind(this)

	protected get<O>(input: unknown): O {
		// Network request or something...
		return input as O
	}
}

function getBannerAd(this: Client): BannerAd {
	// Type 'Ad' is not assignable to type 'BannerAd'.
	//   Type 'BillboardAd' is not assignable to type 'BannerAd'.
	//     Types of property 'type' are incompatible.
	//       Type '"billboard"' is not assignable to type '"banner"'.
	return this.getAd<BannerAd>('banner')
}

function getBillboardAd(this: Client): BillboardAd {
	// Expected 0 type arguments, but got 1.
	return this.getAd<BillboardAd>('billboard')
}

In this example, getAd has a different signature than Client.getAd, which I don't think should happen.

I posted a related question on stackoverflow and it looks like there's no current option to solve it: https://stackoverflow.com/questions/76924554/why-doesnt-typescript-correctly-infer-this-type

One thing to keep in mind is that the .bind method accept arguments that will be used systematically when calling the binding :

declare const timeout: number;
declare function toTuple<T, U>(a: T, b: U): [T, U];

const tupleWithFoo = toTuple.bind(undefined, timeout);
// Expected type : (b: U) => [number, U]

Navigation Menu

Repository navigation

Generics are lost during `Function.prototype.bind()` and `Function.prototype.call()` #54707

Suggestion

🔍 Search Terms

✅ Viability Checklist

⭐ Suggestion

📃 Motivating Example

💻 Use Cases

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Generics are lost during Function.prototype.bind() and Function.prototype.call() #54707

Description

Suggestion

🔍 Search Terms

✅ Viability Checklist

⭐ Suggestion

📃 Motivating Example

💻 Use Cases

Activity

jcalz commented on Jun 21, 2023

NatoBoram commented on Jun 30, 2023

rosostolato commented on Aug 17, 2023

JesusTheHun commented on May 21, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Generics are lost during `Function.prototype.bind()` and `Function.prototype.call()` #54707