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.

Nell’issue non sono indicati file, test o punti di ingresso. Inizia individuando il supporto di refactoring esistente per le dichiarazioni di funzione e le variabili funzione, quindi determina come entrambe le direzioni debbano preservare i parametri, i tipi restituiti, le esportazioni e l’uso di JSX mostrati. Il lavoro è completo quando entrambe le conversioni sono disponibili come azioni di refactoring e sono coperti i casi TypeScript e TSX illustrati.