wix-incubator / vscode-glean

The extension provides refactoring tools for your React codebase

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Suggestion: annotate function components with `SFC` type

OliverJAsh opened this issue · comments

Thanks for this amazing project!

When converting from class to function components, could we annotate (in TypeScript files) the function component using the SFC type?

For example:

const MyComponent: SFC<Props> = props => <div />;

Annotating the type allows the props to be defined outside of the function definition, similar to how classes work. It's also an extra precaution to ensure the function returns the correct types.

Hey @OliverJAsh. Glad you like the project. Thanks of awesome suggestions!
One of the latest releases improved class->functional transformation when using TS, but transforming it to const MyComponent = (props: Props) => <div />;

Isn't that not sufficient? Could you present the benefits of annotating the variable instead?

@OliverJAsh i've implemented the behavior. Look for it in https://github.com/wix/vscode-glean/tree/v4.1.0

Thank you! ❤️