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.

El issue no nombra archivos, pruebas ni puntos de entrada. Empieza localizando el soporte de refactorización existente para declaraciones de funciones y variables de función, y determina después cómo deben conservar ambas direcciones los parámetros, tipos de retorno, exportaciones y el uso de JSX mostrados. Se considera terminado cuando ambas conversiones están disponibles como acciones de refactorización y existe cobertura para los casos de TypeScript y TSX ilustrados.