Fixed #58.

Author: joshwilsonvu

docs/no-destructure.md

@@ -199,6 +199,10 @@ let Component = (_props) => {
   return <div a={props["a" + ""]} b={rest.b} />;
 };
 
+let Component = ({ prop1, prop2 }: Props) => <div p1={prop1} p2={prop2} />;
+// after eslint --fix:
+let Component = (props: Props) => <div p1={props.prop1} p2={props.prop2} />;
+ 
 ```
 
 ### Valid Examples
@@ -251,5 +255,7 @@ let Component = (props) => {
 
 let element = <div />;
 
+let Component = (props: Props) => <div />;
+
 ```
 <!-- AUTO-GENERATED-CONTENT:END -->

src/rules/no-destructure.ts

@@ -126,7 +126,13 @@ const rule: TSESLint.RuleModule<"noDestructure", []> = {
 
       // Replace destructured props with a `props` identifier (`_props` in case of rest params/defaults)
       const origProps = !(hasDefaults || rest) ? propsName : "_" + propsName;
-      fixes.push(fixer.replaceText(props, origProps));
+      if (props.typeAnnotation) {
+        // in `{ prop1, prop2 }: Props`, leave `: Props` alone
+        const range = [props.range[0], props.typeAnnotation.range[0]] as const;
+        fixes.push(fixer.replaceTextRange(range, origProps));
+      } else {
+        fixes.push(fixer.replaceText(props, origProps));
+      }
 
       const sourceCode = context.getSourceCode();
 

test/rules/no-destructure.test.ts

@@ -35,6 +35,10 @@ export const cases = run("no-destructure", rule, {
       return <div a={a} />;
     }`,
     `let element = <div />`, // parse top level JSX
+    {
+      code: `let Component = (props: Props) => <div />;`,
+      parser: require.resolve("@typescript-eslint/parser"),
+    },
   ],
   invalid: [
     {
@@ -240,5 +244,11 @@ various();
   const [props, rest] = splitProps(mergeProps({ ['a' + '']: 5 }, _props), ['a' + '']);  return (<div a={props['a' + '']} b={rest.b} />);
 }`,
     },
+    {
+      code: `let Component = ({ prop1, prop2 }: Props) => <div p1={prop1} p2={prop2} />;`,
+      parser: require.resolve("@typescript-eslint/parser"),
+      errors: [{ messageId: "noDestructure" }],
+      output: `let Component = (props: Props) => <div p1={props.prop1} p2={props.prop2} />;`,
+    },
   ],
 });