useVueTypedRef (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.3
Diagnostic Category: lint/nursery/useVueTypedRef
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-ref

How to configure

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

Description

Require a type for refs created with ref() or shallowRef() in TypeScript.

When ref() or shallowRef() is called without a type argument and without an initial value, TypeScript gives the ref the any type. You can then put any value in the ref, and TypeScript won’t report a mistake, even when noImplicitAny is enabled. The same applies when the initial value is null or undefined: TypeScript can’t tell which other values the ref is meant to hold.

This rule reports these calls, unless the type of the ref is already written next to the call:

in a variable declaration, such as const count: Ref<number | undefined> = ref();
in a class property declaration;
in an assignment to a variable or parameter that has a type;
with as, satisfies or <Type>;
as the default value of a parameter that has a type;
as an argument to a function declared in the same file, when the matching parameter has a type.

The rule doesn’t know the types of functions imported from other files, so a call passed to one of them is still reported.

Only TypeScript files and Vue files with <script lang="ts"> are checked.

Examples

Invalid

1
import { ref } from "vue";
2

3
const count = ref();

code-block.ts:3:15 lint/nursery/useVueTypedRef ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This ref() call creates a ref without a type.
  
    1 │ import { ref } from "vue";
    2 │ 
  > 3 │ const count = ref();
      │               ^^^^^
    4 │ 
  
  ℹ Without a type argument, TypeScript can't tell which values the ref is meant to hold, so it can't catch mistakes when the ref is used.
  
  ℹ Add a type argument, for example ref<number>().
  
  ℹ 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
import { shallowRef } from "vue";
2

3
const user = shallowRef(null);

code-block.ts:3:14 lint/nursery/useVueTypedRef ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This shallowRef() call creates a ref without a type.
  
    1 │ import { shallowRef } from "vue";
    2 │ 
  > 3 │ const user = shallowRef(null);
      │              ^^^^^^^^^^^^^^^^
    4 │ 
  
  ℹ Without a type argument, TypeScript can't tell which values the ref is meant to hold, so it can't catch mistakes when the ref is used.
  
  ℹ Add a type argument, for example shallowRef<number>().
  
  ℹ 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
import { ref, type Ref } from "vue";
2

3
const a = ref<number>();
4
const b = ref(0);
5
const c: Ref<number | undefined> = ref();
6
const d = ref() as Ref<number | undefined>;
7

8
function useCount(count: Ref<number | undefined>) {}
9
useCount(ref());