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.

Issue にはファイル、テスト、エントリポイントが記載されていません。まず、関数宣言と関数変数に対する既存のリファクタリングサポートを見つけ、次に、両方向で示されているパラメーター、戻り値の型、エクスポート、JSX の使用方法をどのように維持すべきかを判断してください。両方の変換がリファクタリングアクションとして利用でき、例示されている TypeScript および TSX のケースがカバーされていれば完了です。