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

[NatoBoram]

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.

[jcalz]

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?

[NatoBoram]

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.

[rosostolato]

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

[JesusTheHun]

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]