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 không nêu tên tệp, bài kiểm thử hay điểm vào nào. Hãy bắt đầu bằng cách xác định phần hỗ trợ tái cấu trúc hiện có cho các khai báo hàm và biến hàm, sau đó xác định cách cả hai hướng cần giữ nguyên các tham số, kiểu trả về, export và cách sử dụng JSX được minh họa. Được xem là hoàn tất khi cả hai chuyển đổi đều khả dụng dưới dạng các hành động tái cấu trúc và có độ bao phủ cho các trường hợp TypeScript và TSX được minh họa.