require-typed-ref.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/require-typed-ref	require `ref` and `shallowRef` functions to be strongly typed	v9.15.0

vue/require-typed-ref

require ref and shallowRef functions to be strongly typed

📖 Rule Details

This rule disallows calling ref() or shallowRef() functions without generic type parameter or an argument when using TypeScript.

With TypeScript it is easy to prevent usage of any by using noImplicitAny. Unfortunately this rule is easily bypassed with Vue ref() function. Calling ref() function without a generic parameter or an initial value leads to ref having Ref<any> type.

<script setup lang="ts">
import { ref, shallowRef, type Ref } from 'vue'

/* ✗ BAD */
const count = ref() // Returns Ref<any> that is not type checked
count.value = '50' // Should be a type error, but it is not

const count = shallowRef()

/* ✓ GOOD */
const count = ref<number>()
const count = ref(0)
const count: Ref<number | undefined> = ref()
</script>

🔧 Options

Nothing.

🚀 Version

This rule was introduced in eslint-plugin-vue v9.15.0

🔍 Implementation

• Rule source
• Test source