Provide quick fix for a missing callback function

[jasonlyu123]

Suggestion

🔍 Search Terms

• quick fix
• code action
• callback
• missing function

✅ 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

The fixMissingFunctionDeclaration quick fix currently only works with a function call. It would be nice if the feature can be extended to support a callback function. It would be especially useful with an event handler when you don't remember the type of event.

Probably needed to find out the target type of the callback function and use it to provide a quick fix. A shortcoming I can think of is that a function signature might have multiple overloads. So it might be quite impossible to summarize it in a quick fix description/ title. I think it would be ok if it only provides a quick fix when the function signature is apparent. Like only support when there is only one signature match.

📃 Motivating Example

1. function call with callback function parameter

document.addEventListener('click', handleClick)

to

document.addEventListener('click', handleClick)

function handleClick(e: MouseEvent) {
   throw new Error("Function not implemented.");
}

2. object literal with a callback as property

interface HandleClick {
    onClick(e: Event): void;
}

const a: HandleClick = {
    onClick: handleClick
}

to

interface HandleClick {
    onClick(e: Event): void;
}

const a: HandleClick = {
    onClick: handleClick
}

function handleClick(e: MouseEvent) {
   throw new Error("Function not implemented.");
}

3. similar to the previous one but with JSX

<div onClick={onClick}>

💻 Use Cases

Quickly writes down the callback function declaration when you don't want an inline one.

Current behaviour

See the ts playground for the current behaviour. Right now the function call with a callback parameter would yield a wrong function and it's not supported in property assignment.

https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgBJxAEwDYQMLbAIDWyA3gFDLXID2IBRxAFBAFzICiAbhOAJQdutYJgDcFAL4UKCegGcwyOB3RZcjEsgC85KjXqbiHABYYc+QiSkyz6y02YgIAd2QBZWgFd5EHnzBmAHIEK2Ig-n4JCkxaBC8AWwCAOjhMTH9wABlgRT5oYNCmIIAaZDsLI34ZWPik8FT0zLAcvOcoQrDS5BRtAD5y8w0w1kigA

Workaround

There is a workaround for it now. just more verbose and unintuitive. Instead of directly writing down the function, wrap it with an arrow function or a function expression.

document.addEventListener('click', e => handleClick(e))

This way the current quick fix would be able to pick it up and provide function declaration.

[jasonlyu123]

I notice that it doesn't work when the function is typed as a union like (() => void) | null. It'll work if the strictNullChecks is turned off as it's no longer a union type. Should I open a separate issue for it? I tried locally and it seems to be a relatively easy fix. I can create the PR if you're ok with supporting it.

[sandersn]

Please do open an issue. An arrow unioned with null is a pretty common type.