Vue组件泛型引发ESLint冗余类型错误，咨询是否为预期行为

Why the difference happens #

Yes, this behavior is expected, and it boils down to how TypeScript and ESLint handle generics in Vue's <script setup> versus regular functions:

1. Vue component context:
   When you declare an unconstrained generic T in <script setup> without a default type, TypeScript defaults T to unknown at the component's top level. Since unknown encompasses all possible types (including null), the union T | null effectively becomes unknown | null—which is redundant because unknown already includes null. ESLint's @typescript-eslint/no-redundant-type-constituents rule picks up on this redundancy and throws the error.

2. Regular function context:
   Even though the function's T is also unconstrained, ESLint doesn't flag it because the function is a generic meant to be instantiated with specific types later. When you call createRef<number>(), T resolves to number, making number | null a valid, non-redundant union. The rule recognizes that the generic's type isn't fixed at the function's definition, so it doesn't treat the union as redundant here.

How to fix the Vue component #

You have a few options to resolve the ESLint error while keeping your intended type structure:

• Constrain T to exclude null:
  If you want T to always be a non-null type, add a constraint to ensure it can't be null or undefined:

  <script setup lang="ts" generic="T extends NonNullable<unknown>">
  import { Ref, ref } from "vue";
  
  const t: Ref<T | null> = ref(null);
  </script>
  

  This makes T | null a meaningful union (non-null T plus null) that doesn't trigger the redundancy rule.

• Set a default type for T:
  If you have a common default type in mind for T, specify it to avoid unknown as the default:

  <script setup lang="ts" generic="T = string">
  import { Ref, ref } from "vue";
  
  const t: Ref<T | null> = ref(null);
  </script>
  

  Now T defaults to string, so string | null is a valid, non-redundant union.

• Disable the rule for the line:
  If you expect consumers of your component to always specify a concrete T (so unknown is never used in practice), you can disable the rule for that line:

  <script setup lang="ts" generic="T">
  import { Ref, ref } from "vue";
  
  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
  const t: Ref<T | null> = ref(null);
  </script>
  

内容的提问来源于stack exchange，提问作者Arkandias