Add refactoring option to convert between function declaration and function variable

Search Terms

• refactor function declaration
• refactor to arrow function

Suggestion

Consider adding refactoring from

const fn = (x: number): number => {
  return x + 1
}

into

function fn(x: number): number {
  return x + 1
}

and vice-versa.

Use Cases

I found myself doing this refactor by hand many times. I think the main use cases are:

• Project has code style which enforces one of the above, and you're pasting some other code.
• Particular function declaration simply looks better when written as block-less arrow function.
• After refactoring an arrow function to a variable in current scope, it always picks the arrow style, but it could be written as a declaration as well.

Examples

Don't know if viable, but here it goes:

export const Component: React.FC<Props> = props => {
  return <h1>Hello, {props.name}</h1>
}

export function Component(props: Props) {
  return <h1>Hello, {props.name}</h1>
}

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.

Im Issue werden keine Dateien, Tests oder Einstiegspunkte genannt. Beginne damit, die bestehende Refactoring-Unterstützung für Funktionsdeklarationen und Funktionsvariablen zu finden, und ermittle dann, wie beide Richtungen die dargestellten Parameter, Rückgabetypen, Exporte und die JSX-Verwendung beibehalten sollen. Als erledigt gilt die Aufgabe, wenn beide Konvertierungen als Refactoring-Aktionen verfügbar sind und die dargestellten TypeScript- und TSX-Fälle abgedeckt werden.