fix(define-props-destructuring): imported props declaration does not work (#2995)

Co-authored-by: waynzh <waynzh19@gmail.com>

Author: rzzf

.changeset/lemon-turtles-visit.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-vue': patch
+---
+
+Fixed false positives in `vue/define-props-destructuring` rule when imported types are passed to `defineProps`

lib/rules/define-props-destructuring.js

@@ -40,8 +40,10 @@ module.exports = {
     return utils.compositingVisitors(
       utils.defineScriptSetupVisitor(context, {
         onDefinePropsEnter(node, props) {
-          const hasNoArgs = props.filter((prop) => prop.propName).length === 0
-          if (hasNoArgs) {
+          const hasArgs = props.some(
+            (prop) => prop.propName || (prop.type === 'unknown' && prop.node)
+          )
+          if (!hasArgs) {
             return
           }
 

tests/lib/rules/define-props-destructuring.js

@@ -44,6 +44,30 @@ tester.run('define-props-destructuring', rule, {
         parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
       }
     },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      import type { Props } from './type'
+      const { foo } = defineProps<Props>()
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      import { propsObj } from './type'
+      const { foo } = defineProps(propsObj)
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
+    },
     {
       filename: 'test.vue',
       code: `
@@ -73,6 +97,32 @@ tester.run('define-props-destructuring', rule, {
       languageOptions: {
         parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
       }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      import type { Props } from './type'
+      const props = defineProps<Props>()
+      </script>
+      `,
+      options: [{ destructure: 'never' }],
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      import { propsObj } from './type'
+      const props = defineProps(propsObj)
+      </script>
+      `,
+      options: [{ destructure: 'never' }],
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
     }
   ],
   invalid: [
@@ -167,6 +217,48 @@ tester.run('define-props-destructuring', rule, {
         }
       ]
     },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      import type { Props } from './type'
+      const props = defineProps<Props>()
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
+      errors: [
+        {
+          messageId: 'preferDestructuring',
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 41
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      import { propsObj } from './type'
+      const props = defineProps(propsObj)
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
+      errors: [
+        {
+          messageId: 'preferDestructuring',
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 42
+        }
+      ]
+    },
     {
       filename: 'test.vue',
       code: `
@@ -223,6 +315,50 @@ tester.run('define-props-destructuring', rule, {
           endColumn: 54
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      import type { Props } from './type'
+      const { foo } = defineProps<Props>()
+      </script>
+      `,
+      options: [{ destructure: 'never' }],
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
+      errors: [
+        {
+          messageId: 'avoidDestructuring',
+          line: 4,
+          column: 23,
+          endLine: 4,
+          endColumn: 43
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      import { propsObj } from './type'
+      const { foo } = defineProps(propsObj)
+      </script>
+      `,
+      options: [{ destructure: 'never' }],
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
+      errors: [
+        {
+          messageId: 'avoidDestructuring',
+          line: 4,
+          column: 23,
+          endLine: 4,
+          endColumn: 44
+        }
+      ]
     }
   ]
 })