diff --git a/docs/rules/define-props-declaration.md b/docs/rules/define-props-declaration.md
index 5c72d538a..51a2864e7 100644
--- a/docs/rules/define-props-declaration.md
+++ b/docs/rules/define-props-declaration.md
@@ -10,13 +10,15 @@ since: v9.5.0
 
 > enforce declaration style of `defineProps`
 
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
 ## :book: Rule Details
 
 This rule enforces `defineProps` typing style which you should use `type-based` or `runtime` declaration.
 
 This rule only works in setup script and `lang="ts"`.
 
-<eslint-code-block :rules="{'vue/define-props-declaration': ['error']}">
+<eslint-code-block fix :rules="{'vue/define-props-declaration': ['error']}">
 
 ```vue
 <script setup lang="ts">
@@ -39,7 +41,11 @@ const props = defineProps({
 ## :wrench: Options
 
 ```json
-  "vue/define-props-declaration": ["error", "type-based" | "runtime"]
+{
+  "vue/define-props-declaration": ["error",
+    "type-based" | "runtime"
+  ]
+}
 ```
 
 - `type-based` (default) enforces type-based declaration
@@ -47,7 +53,7 @@ const props = defineProps({
 
 ### `"runtime"`
 
-<eslint-code-block :rules="{'vue/define-emits-declaration': ['error', 'runtime']}">
+<eslint-code-block fix :rules="{'vue/define-emits-declaration': ['error', 'runtime']}">
 
 ```vue
 <script setup lang="ts">
diff --git a/docs/rules/index.md b/docs/rules/index.md
index e718603f8..0a7ea5cd8 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -214,7 +214,7 @@ For example:
 | [vue/custom-event-name-casing](./custom-event-name-casing.md) | enforce specific casing for custom event name |  | :hammer: |
 | [vue/define-emits-declaration](./define-emits-declaration.md) | enforce declaration style of `defineEmits` |  | :hammer: |
 | [vue/define-macros-order](./define-macros-order.md) | enforce order of `defineEmits` and `defineProps` compiler macros | :wrench::bulb: | :lipstick: |
-| [vue/define-props-declaration](./define-props-declaration.md) | enforce declaration style of `defineProps` |  | :hammer: |
+| [vue/define-props-declaration](./define-props-declaration.md) | enforce declaration style of `defineProps` | :wrench: | :hammer: |
 | [vue/enforce-style-attribute](./enforce-style-attribute.md) | enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags |  | :hammer: |
 | [vue/html-button-has-type](./html-button-has-type.md) | disallow usage of button without an explicit type attribute |  | :hammer: |
 | [vue/html-comment-content-newline](./html-comment-content-newline.md) | enforce unified line brake in HTML comments | :wrench: | :lipstick: |
diff --git a/lib/rules/define-props-declaration.js b/lib/rules/define-props-declaration.js
index 3862bb228..8112054db 100644
--- a/lib/rules/define-props-declaration.js
+++ b/lib/rules/define-props-declaration.js
@@ -6,6 +6,224 @@
 
 const utils = require('../utils')
 
+/**
+ * @typedef {import('../utils').ComponentProp} ComponentProp
+ */
+
+const PROPS_SEPARATOR = ', '
+
+/**
+ * @param {RuleFixer} fixer
+ * @param {CallExpression} node
+ * @param {ComponentProp[]} props
+ * @param {RuleContext} context
+ */
+function* fixTypeBased(fixer, node, props, context) {
+  const sourceCode = context.getSourceCode()
+
+  const componentPropsData = props.map((prop) =>
+    getComponentPropData(prop, sourceCode)
+  )
+
+  const componentPropsTypes = componentPropsData.map(
+    ({ name, type, required, defaultValue }) => {
+      const isOptional = required === false || defaultValue
+      return `${name}${isOptional ? '?' : ''}: ${type}`
+    }
+  )
+
+  const componentPropsTypeCode = `{ ${componentPropsTypes.join(
+    PROPS_SEPARATOR
+  )} }`
+
+  // remove defineProps function parameters
+  yield fixer.replaceText(node.arguments[0], '')
+
+  // add type annotation
+  yield fixer.insertTextAfter(node.callee, `<${componentPropsTypeCode}>`)
+
+  // add defaults if needed
+  const propTypesDataWithDefaultValue = componentPropsData.filter(
+    ({ defaultValue }) => defaultValue
+  )
+  if (propTypesDataWithDefaultValue.length > 0) {
+    const defaultsCode = propTypesDataWithDefaultValue
+      .map(
+        ({ name, defaultValue }) =>
+          `${name}: ${sourceCode.getText(defaultValue)}`
+      )
+      .join(PROPS_SEPARATOR)
+
+    yield fixer.insertTextBefore(node, `withDefaults(`)
+    yield fixer.insertTextAfter(node, `, { ${defaultsCode} })`)
+  }
+  return null
+}
+
+/**
+ * @param {string} nativeType
+ * @returns {string}
+ */
+const mapNativeType = (nativeType) => {
+  switch (nativeType) {
+    case 'String': {
+      return 'string'
+    }
+    case 'Number': {
+      return 'number'
+    }
+    case 'Boolean': {
+      return 'boolean'
+    }
+    case 'Object': {
+      return 'Record<string, any>'
+    }
+    case 'Array': {
+      return 'any[]'
+    }
+    case 'Function': {
+      return '(...args: any[]) => any'
+    }
+    case 'Symbol': {
+      return 'symbol'
+    }
+    default: {
+      return nativeType
+    }
+  }
+}
+
+/**
+ * @param {ComponentProp} prop
+ * @param {SourceCode} sourceCode
+ */
+function getComponentPropData(prop, sourceCode) {
+  if (prop.type === 'array') {
+    throw new Error(`Unable to resolve types based on array prop declaration.`)
+  } else if (prop.type === 'object') {
+    if (prop.propName === null) {
+      throw new Error('Unexpected prop with null name.')
+    }
+
+    const type = optionGetType(prop.value, sourceCode)
+    const required = optionGetRequired(prop.value)
+    const defaultValue = optionGetDefault(prop.value)
+
+    return {
+      name: prop.propName,
+      type,
+      required,
+      defaultValue
+    }
+  }
+  throw new Error(`Unexpected prop type: ${prop.type}.`)
+}
+
+/**
+ * @param {Expression} node
+ * @param {SourceCode} sourceCode
+ * @returns {string}
+ */
+function optionGetType(node, sourceCode) {
+  switch (node.type) {
+    case 'Identifier': {
+      return mapNativeType(node.name)
+    }
+    case 'ObjectExpression': {
+      const typeProperty = utils.findProperty(node, 'type')
+      if (typeProperty == null) {
+        return sourceCode.getText(node)
+      }
+      return optionGetType(typeProperty.value, sourceCode)
+    }
+    case 'ArrayExpression': {
+      return node.elements
+        .map((element) => {
+          if (element === null || element.type === 'SpreadElement') {
+            return sourceCode.getText(node)
+          }
+
+          return optionGetType(element, sourceCode)
+        })
+        .filter(Boolean)
+        .join(' | ')
+    }
+    case 'TSAsExpression': {
+      const typeAnnotation = node.typeAnnotation
+      if (typeAnnotation.typeName.name !== 'PropType') {
+        return sourceCode.getText(node)
+      }
+
+      // in some project configuration parser populates deprecated field `typeParameters` instead of `typeArguments`
+      const typeArguments =
+        'typeArguments' in node
+          ? typeAnnotation.typeArguments
+          : typeAnnotation.typeParameters
+
+      const typeArgument = Array.isArray(typeArguments)
+        ? typeArguments[0].params[0]
+        : typeArguments.params[0]
+
+      if (typeArgument === undefined) {
+        return sourceCode.getText(node)
+      }
+
+      return sourceCode.getText(typeArgument)
+    }
+    case 'LogicalExpression': {
+      if (node.operator === '||') {
+        const left = optionGetType(node.left, sourceCode)
+        const right = optionGetType(node.right, sourceCode)
+        if (left && right) {
+          return `${left} | ${right}`
+        }
+      }
+      return sourceCode.getText(node)
+    }
+    default: {
+      return sourceCode.getText(node)
+    }
+  }
+}
+
+/**
+ * @param {Expression} node
+ * @returns {boolean}
+ */
+function optionGetRequired(node) {
+  if (node.type === 'ObjectExpression') {
+    const requiredProperty = utils.findProperty(node, 'required')
+    if (requiredProperty == null) {
+      return false
+    }
+
+    if (requiredProperty.value.type === 'Literal') {
+      return Boolean(requiredProperty.value.value)
+    }
+  }
+
+  // Unknown
+  return false
+}
+
+/**
+ * @param {Expression} node
+ * @returns {Expression | undefined}
+ */
+function optionGetDefault(node) {
+  if (node.type === 'ObjectExpression') {
+    const defaultProperty = utils.findProperty(node, 'default')
+    if (defaultProperty == null) {
+      return undefined
+    }
+
+    return defaultProperty.value
+  }
+
+  // Unknown
+  return undefined
+}
+
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -14,7 +232,7 @@ module.exports = {
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/define-props-declaration.html'
     },
-    fixable: null,
+    fixable: 'code',
     schema: [
       {
         enum: ['type-based', 'runtime']
@@ -33,14 +251,22 @@ module.exports = {
     }
 
     const defineType = context.options[0] || 'type-based'
+
     return utils.defineScriptSetupVisitor(context, {
-      onDefinePropsEnter(node) {
+      onDefinePropsEnter(node, props) {
         switch (defineType) {
           case 'type-based': {
             if (node.arguments.length > 0) {
               context.report({
                 node,
-                messageId: 'hasArg'
+                messageId: 'hasArg',
+                *fix(fixer) {
+                  try {
+                    yield* fixTypeBased(fixer, node, props, context)
+                  } catch (error) {
+                    // ignore
+                  }
+                }
               })
             }
             break
diff --git a/tests/lib/rules/define-props-declaration.js b/tests/lib/rules/define-props-declaration.js
index d6785b93c..116e48754 100644
--- a/tests/lib/rules/define-props-declaration.js
+++ b/tests/lib/rules/define-props-declaration.js
@@ -11,7 +11,10 @@ const tester = new RuleTester({
   languageOptions: {
     parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
-    sourceType: 'module'
+    sourceType: 'module',
+    parserOptions: {
+      parser: require.resolve('@typescript-eslint/parser')
+    }
   }
 })
 
@@ -108,6 +111,7 @@ tester.run('define-props-declaration', rule, {
     }
   ],
   invalid: [
+    // default
     {
       filename: 'test.vue',
       code: `
@@ -117,6 +121,34 @@ tester.run('define-props-declaration', rule, {
       })
       </script>
       `,
+      output: `
+      <script setup lang="ts">
+      const props = defineProps<{ kind?: string }>()
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
+    },
+    /* TYPE-BASED */
+    // shorthand syntax
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps({
+        kind: String
+      })
+      </script>
+      `,
+      output: `
+      <script setup lang="ts">
+      const props = defineProps<{ kind?: string }>()
+      </script>
+      `,
       errors: [
         {
           message: 'Use type-based declaration instead of runtime declaration.',
@@ -124,6 +156,7 @@ tester.run('define-props-declaration', rule, {
         }
       ]
     },
+    // String
     {
       filename: 'test.vue',
       code: `
@@ -133,6 +166,11 @@ tester.run('define-props-declaration', rule, {
       })
       </script>
       `,
+      output: `
+      <script setup lang="ts">
+      const props = defineProps<{ kind?: string }>()
+      </script>
+      `,
       options: ['type-based'],
       errors: [
         {
@@ -141,15 +179,448 @@ tester.run('define-props-declaration', rule, {
         }
       ]
     },
+    // Number
     {
       filename: 'test.vue',
       code: `
       <script setup lang="ts">
-      const props = defineProps<{
-        kind: string;
-      }>()
+      const props = defineProps({
+        kind: { type: Number}
+      })
+      </script>
+      `,
+      output: `
+      <script setup lang="ts">
+      const props = defineProps<{ kind?: number }>()
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
+    },
+    // Boolean
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps({
+        kind: { type: Boolean}
+      })
+      </script>
+      `,
+      output: `
+      <script setup lang="ts">
+      const props = defineProps<{ kind?: boolean }>()
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
+    },
+    // Object
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps({
+        kind: { type:Object}
+      })
+      </script>
+      `,
+      output: `
+      <script setup lang="ts">
+      const props = defineProps<{ kind?: Record<string, any> }>()
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
+    },
+    // Array
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps({
+        kind: { type:Array}
+      })
+      </script>
+      `,
+      output: `
+      <script setup lang="ts">
+      const props = defineProps<{ kind?: any[] }>()
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
+    },
+    // Function
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps({
+        kind: { type: Function}
+      })
+      </script>
+      `,
+      output: `
+      <script setup lang="ts">
+      const props = defineProps<{ kind?: (...args: any[]) => any }>()
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
+    },
+    // Custom type
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps({
+        kind: User
+      })
+      </script>
+      `,
+      output: `
+      <script setup lang="ts">
+      const props = defineProps<{ kind?: User }>()
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
+    },
+    // Native Type with PropType
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps({
+        kind: {
+          type: String as PropType<'a' | 'b'>,
+        }
+      })
+      </script>
+      `,
+      output: `
+      <script setup lang="ts">
+      const props = defineProps<{ kind?: 'a' | 'b' }>()
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
+    },
+    // Object with PropType
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps({
+        kind: {
+          type: Object as PropType<{ id: number; name: string }>,
+        }
+      })
+      </script>
+      `,
+      output: `
+      <script setup lang="ts">
+      const props = defineProps<{ kind?: { id: number; name: string } }>()
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
+    },
+    // Object with PropType with separate type
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      interface Kind { id: number; name: string }
+
+      const props = defineProps({
+        kind: {
+          type: Object as PropType<Kind>,
+        }
+      })
+      </script>
+      `,
+      output: `
+      <script setup lang="ts">
+      interface Kind { id: number; name: string }
+
+      const props = defineProps<{ kind?: Kind }>()
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 5
+        }
+      ]
+    },
+    // Object with PropType with separate imported type
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      import Kind from 'test'
+
+      const props = defineProps({
+        kind: {
+          type: Object as PropType<Kind>,
+        }
+      })
+      </script>
+      `,
+      output: `
+      <script setup lang="ts">
+      import Kind from 'test'
+
+      const props = defineProps<{ kind?: Kind }>()
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 5
+        }
+      ]
+    },
+    // Array with PropType
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps({
+        kind: {
+          type: Array as PropType<string[]>
+        }
+      })
+      </script>
+      `,
+      output: `
+      <script setup lang="ts">
+      const props = defineProps<{ kind?: string[] }>()
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
+    },
+    // Function with PropType
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps({
+        kind: {
+          type: Function as PropType<(a: number, b: string) => boolean>,
+        }
+      })
       </script>
       `,
+      output: `
+      <script setup lang="ts">
+      const props = defineProps<{ kind?: (a: number, b: string) => boolean }>()
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
+    },
+    // required
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+        const props = defineProps({
+          kind: {
+            type: String,
+            required: true
+          }
+        })
+        </script>
+        `,
+      output: `
+        <script setup lang="ts">
+        const props = defineProps<{ kind: string }>()
+        </script>
+        `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
+    },
+    // not required
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+        const props = defineProps({
+          kind: {
+            type: String,
+            required: false
+          }
+        })
+        </script>
+        `,
+      output: `
+        <script setup lang="ts">
+        const props = defineProps<{ kind?: string }>()
+        </script>
+        `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
+    },
+    // default value
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+        const props = defineProps({
+          kind: {
+            type: String,
+            default: 'foo'
+          }
+        })
+        </script>
+        `,
+      output: `
+        <script setup lang="ts">
+        const props = withDefaults(defineProps<{ kind?: string }>(), { kind: 'foo' })
+        </script>
+        `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
+    },
+    // Array of types
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+        const props = defineProps({
+          kind: {
+            type: [String, Number]
+          }
+        })
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+        const props = defineProps<{ kind?: string | number }>()
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
+    },
+    // Union type (Number || String)
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+        const props = defineProps({
+          kind: {
+            type: Number || String
+          }
+        })
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+        const props = defineProps<{ kind?: number | string }>()
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
+    },
+    // Some unhandled expression type
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+        const props = defineProps({
+          kind: {
+            type: typeof Test
+          }
+        })
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+        const props = defineProps<{ kind?: typeof Test }>()
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
+    },
+    // runtime
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+        const props = defineProps<{
+          kind: string;
+        }>()
+        </script>
+      `,
+      output: null,
       options: ['runtime'],
       languageOptions: {
         parserOptions: {
@@ -162,6 +633,21 @@ tester.run('define-props-declaration', rule, {
           line: 3
         }
       ]
+    },
+    // array
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps([kind])
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
     }
   ]
 })

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/vuejs/eslint-plugin-vue/pull/2466.diff" target="_blank">Alternative Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/vuejs/eslint-plugin-vue/pull/2466.diff" target="_blank">pFad Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/vuejs/eslint-plugin-vue/pull/2466.diff" target="_blank">pFad v3 Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/vuejs/eslint-plugin-vue/pull/2466.diff" target="_blank">pFad v4 Proxy</a></p></body>
</html>