← Back to rules

vue/require-typed-ref Style

What it does

Require ref and shallowRef functions to be strongly typed.

Why is this bad?

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.

Examples

Examples of incorrect code for this rule:

const count = ref();
const name = shallowRef();

Examples of correct code for this rule:

const count = ref<number>();
const a = ref(0);

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["vue"],
  "rules": {
    "vue/require-typed-ref": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["vue"],
  rules: {
    "vue/require-typed-ref": "error",
  },
});

CLI

oxlint --deny vue/require-typed-ref --vue-plugin

Version

This rule was added in v1.17.0.

References

• Rule Source
• Upstream rule docs
• Open rule in Oxc Playground