Add vue/require-typed-object-prop rule (#1983)

Co-authored-by: Flo Edelmann <git@flo-edelmann.de>

docs/rules/index.md

@@ -268,6 +268,7 @@ For example:
 | [vue/require-macro-variable-name](./require-macro-variable-name.md) | require a certain macro variable name | :bulb: | :hammer: |
 | [vue/require-name-property](./require-name-property.md) | require a name property in Vue components | :bulb: | :hammer: |
 | [vue/require-prop-comment](./require-prop-comment.md) | require props to have a comment |  | :hammer: |
+| [vue/require-typed-object-prop](./require-typed-object-prop.md) | enforce adding type declarations to object props | :bulb: | :hammer: |
 | [vue/require-typed-ref](./require-typed-ref.md) | require `ref` and `shallowRef` functions to be strongly typed |  | :hammer: |
 | [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: | :lipstick: |
 | [vue/sort-keys](./sort-keys.md) | enforce sort-keys in a manner that is compatible with order-in-components |  | :hammer: |

docs/rules/require-typed-object-prop.md

@@ -0,0 +1,50 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-typed-object-prop
+description: enforce adding type declarations to object props
+---
+# vue/require-typed-object-prop
+
+> enforce adding type declarations to object props
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+Prevent missing type declarations for non-primitive object props in TypeScript projects.
+
+<eslint-code-block :rules="{'vue/require-typed-object-prop': ['error']}">
+
+```vue
+<script lang="ts">
+export default {
+  props: {
+    // ✗ BAD
+    bad1: Object,
+    bad2: { type: Array },
+      
+    // ✓ GOOD
+    good1: Object as PropType<Anything>,
+    good2: { type: Array as PropType<Anything[]> },
+    good3: [String, Boolean], // or any other primitive type
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :mute: When Not To Use It
+
+When you're not using TypeScript in the project.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-typed-object-prop.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-typed-object-prop.js)

lib/index.js

@@ -192,6 +192,7 @@ module.exports = {
     'require-render-return': require('./rules/require-render-return'),
     'require-slots-as-functions': require('./rules/require-slots-as-functions'),
     'require-toggle-inside-transition': require('./rules/require-toggle-inside-transition'),
+    'require-typed-object-prop': require('./rules/require-typed-object-prop'),
     'require-typed-ref': require('./rules/require-typed-ref'),
     'require-v-for-key': require('./rules/require-v-for-key'),
     'require-valid-default-prop': require('./rules/require-valid-default-prop'),

lib/rules/require-typed-object-prop.js

@@ -0,0 +1,150 @@
+/**
+ * @author Przemysław Jan Beigert
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * @param {RuleContext} context
+ * @param {Identifier} identifierNode
+ */
+const checkPropIdentifierType = (context, identifierNode) => {
+  if (identifierNode.name === 'Object' || identifierNode.name === 'Array') {
+    const arrayTypeSuggestion = identifierNode.name === 'Array' ? '[]' : ''
+    context.report({
+      node: identifierNode,
+      messageId: 'expectedTypeAnnotation',
+      suggest: [
+        {
+          messageId: 'addTypeAnnotation',
+          data: { type: `any${arrayTypeSuggestion}` },
+          fix(fixer) {
+            return fixer.insertTextAfter(
+              identifierNode,
+              ` as PropType<any${arrayTypeSuggestion}>`
+            )
+          }
+        },
+        {
+          messageId: 'addTypeAnnotation',
+          data: { type: `unknown${arrayTypeSuggestion}` },
+          fix(fixer) {
+            return fixer.insertTextAfter(
+              identifierNode,
+              ` as PropType<unknown${arrayTypeSuggestion}>`
+            )
+          }
+        }
+      ]
+    })
+  }
+}
+
+/**
+ * @param {RuleContext} context
+ * @param {ArrayExpression} arrayNode
+ */
+const checkPropArrayType = (context, arrayNode) => {
+  for (const elementNode of arrayNode.elements) {
+    if (elementNode?.type === 'Identifier') {
+      checkPropIdentifierType(context, elementNode)
+    }
+  }
+}
+
+/**
+ * @param {RuleContext} context
+ * @param {ObjectExpression} objectNode
+ */
+const checkPropObjectType = (context, objectNode) => {
+  const typeProperty = objectNode.properties.find(
+    (prop) =>
+      prop.type === 'Property' &&
+      prop.key.type === 'Identifier' &&
+      prop.key.name === 'type'
+  )
+  if (!typeProperty || typeProperty.type !== 'Property') {
+    return
+  }
+
+  if (typeProperty.value.type === 'Identifier') {
+    // `foo: { type: String }`
+    checkPropIdentifierType(context, typeProperty.value)
+  } else if (typeProperty.value.type === 'ArrayExpression') {
+    // `foo: { type: [String, Boolean] }`
+    checkPropArrayType(context, typeProperty.value)
+  }
+}
+
+/**
+ * @param {import('../utils').ComponentProp} prop
+ * @param {RuleContext} context
+ */
+const checkProp = (prop, context) => {
+  if (prop.type !== 'object') {
+    return
+  }
+
+  switch (prop.node.value.type) {
+    case 'Identifier': {
+      // e.g. `foo: String`
+      checkPropIdentifierType(context, prop.node.value)
+      break
+    }
+    case 'ArrayExpression': {
+      // e.g. `foo: [String, Boolean]`
+      checkPropArrayType(context, prop.node.value)
+      break
+    }
+    case 'ObjectExpression': {
+      // e.g. `foo: { type: … }`
+      checkPropObjectType(context, prop.node.value)
+      return
+    }
+  }
+}
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'enforce adding type declarations to object props',
+      categories: undefined,
+      recommended: false,
+      url: 'https://eslint.vuejs.org/rules/require-typed-object-prop.html'
+    },
+    fixable: null,
+    schema: [],
+    // eslint-disable-next-line eslint-plugin/require-meta-has-suggestions -- `context.report` with suggestion is not recognized in `checkPropIdentifierType`
+    hasSuggestions: true,
+    messages: {
+      expectedTypeAnnotation: 'Expected type annotation on object prop.',
+      addTypeAnnotation: 'Add `{{ type }}` type annotation.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    return utils.compositingVisitors(
+      utils.defineScriptSetupVisitor(context, {
+        onDefinePropsEnter(_node, props) {
+          for (const prop of props) {
+            checkProp(prop, context)
+          }
+        }
+      }),
+      utils.executeOnVue(context, (obj) => {
+        const props = utils.getComponentPropsFromOptions(obj)
+
+        for (const prop of props) {
+          checkProp(prop, context)
+        }
+      })
+    )
+  }
+}