ref<SomeType>(value) not pass vue-tsc validation. Why? #12970

GoodDayForSurf · 2025-02-28T17:49:56Z

GoodDayForSurf
Feb 28, 2025 10000

Hi.
I came across a strange error in vue-tsc validation of this code:

<template>
  <myCmp :items="itemsRef"/>
</template>
<script lang="ts" setup>
import { ref, defineComponent, type PropType } from "vue";

interface Item  {
  template?: Element;
  [key: string]: any;
}

const myCmp = defineComponent({
  props: {
    items: Array as PropType<Item[]>
  }
})

const items = [{ id: 1 }];

const itemsRef = ref<Item[]>(items);
</script>

This code doesn't pass vue-tsc validation, I get an error:

error TS2322: Type '{ [x: string]: any; template?: { readonly attributes: { [x: number]: { readonly localName: string; readonly name: string; readonly namespaceURI: string; readonly ownerDocument: { readonly URL: string; alinkColor: string; ... 257 more ...; evaluate: (expression: string, contextNode: Node, resolver?: XPathNSResolver, ...' is not assignable to type 'Item[]'.
  Type '{ [x: string]: any; template?: { readonly attributes: { [x: number]: { readonly localName: string; readonly name: string; readonly namespaceURI: string; readonly ownerDocument: { readonly URL: string; alinkColor: string; ... 257 more ...; evaluate: (expression: string, contextNode: Node, resolver?: XPathNSResolver, ...' is not assignable to type 'Item'.
    The types of 'template.attributes' are incompatible between these types.
      Type '{ [x: number]: { readonly localName: string; readonly name: string; readonly namespaceURI: string; readonly ownerDocument: { readonly URL: string; alinkColor: string; readonly all: { [x: number]: { readonly attributes: ...; ... 167 more ...; readonly assignedSlot: { ...; }; }; readonly length: number; item: (nameOrI...' is not assignable to type 'NamedNodeMap'.
        'number' index signatures are incompatible.

Without using ref() (directly setting properties as items) everything is ok.
Errors occur only if ref<Item[]>(items) is used. But if ref(items) is used
there is second case:
for interface:

interface Item  {
 flag?: boolean,
 [key: string]: any;
}

vue-tsc checking will be OK only if items have the same set of properties.

if itmes = [{ id: 1 }, { id: 2, flag: true }] error appears:

check.vue(2,11): error TS2322: Type '({ id: number; flag?: unknown; } | { id: number; flag: boolean; })[]' is not assignable to type 'Item[]'.
 Type '{ id: number; flag?: unknown; } | { id: number; flag: boolean; }' is not assignable to type 'Item'.
   Type '{ id: number; flag?: unknown; }' is not assignable to type 'Item'.
     Types of property 'flag' are incompatible.
       Type 'unknown' is not assignable to type 'boolean'.

Check by calling npx vue-tsc --noEmit --project tsconfig.vue-check.json

tsconfig.vue-check.json is:

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "lib": ["es2022", "DOM", "DOM.Iterable"],
    "strict": false
  },
  "include": [
    "check.vue"
  ]
}

Is it bug or feature?

Deckluhm · 2025-03-17T11:43:53Z

Deckluhm
Mar 17, 2025

It is working fine on my side using latest vue-tsc (2.2.8).

Which version of vue-tsc are you using?

1 reply

GoodDayForSurf Mar 21, 2025
Author

I use vue-tsc 2.2.8
I noticed that the error of second case only occurs if strict is set to false in tsconfig.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue

ref<SomeType>(value) not pass vue-tsc validation. Why? #12970

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Vue

ref<SomeType>(value) not pass vue-tsc validation. Why? #12970

Uh oh!

Uh oh!

GoodDayForSurf Feb 28, 2025 10000

Replies: 1 comment · 1 reply

Uh oh!

Deckluhm Mar 17, 2025

Uh oh!

Uh oh!

GoodDayForSurf Mar 21, 2025 Author

GoodDayForSurf
Feb 28, 2025 10000

Replies: 1 comment 1 reply

Deckluhm
Mar 17, 2025

GoodDayForSurf Mar 21, 2025
Author