useVueTypedObjectProps (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/useVueTypedObjectProps
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/require-typed-object-prop

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useVueTypedObjectProps": "error"
6
      }
7
    }
8
  }
9
}

Description

Require a TypeScript type for Vue props declared with Object or Array.

When a prop is declared with Object or Array as its type, TypeScript only knows that the prop is an object or an array. It doesn’t know which properties the object has or what the array holds, so it can’t catch mistakes when the prop is passed or used.

Add the full type with as PropType<...>, where PropType is imported from vue.

This rule checks props declared through the props option and defineProps(). Only TypeScript files and Vue files with <script lang="ts"> are checked.

Examples

Invalid

1
<script setup lang="ts">
2
defineProps({
3
  user: Object,
4
});
5
</script>

code-block.vue:3:9 lint/nursery/useVueTypedObjectProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This prop is declared with Object but has no TypeScript type.
  
    1 │ <script setup lang="ts">
    2 │ defineProps({
  > 3 │   user: Object,
      │         ^^^^^^
    4 │ });
    5 │ </script>
  
  ℹ TypeScript only knows that the prop is an object, not which properties it has, so it can't catch mistakes when the prop is passed or used.
  
  ℹ Add the type with PropType from vue, for example Object as PropType<User>.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<script lang="ts">
2
export default {
3
  props: {
4
    items: { type: Array, required: true },
5
  },
6
};
7
</script>

code-block.vue:4:20 lint/nursery/useVueTypedObjectProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This prop is declared with Array but has no TypeScript type.
  
    2 │ export default {
    3 │   props: {
  > 4 │     items: { type: Array, required: true },
      │                    ^^^^^
    5 │   },
    6 │ };
  
  ℹ TypeScript only knows that the prop is an array, not what it holds, so it can't catch mistakes when the prop is passed or used.
  
  ℹ Add the type with PropType from vue, for example Array as PropType<string[]>.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<script setup lang="ts">
2
import type { PropType } from "vue";
3

4
interface User {
5
  name: string;
6
}
7

8
defineProps({
9
  user: Object as PropType<User>,
10
  items: { type: Array as PropType<string[]>, required: true },
11
  label: [String, Number],
12
});
13
</script>