Wrong typescript errors when using ref inside ref

[mseele]

Reproduction link

codesandbox.io

Steps to reproduce

Run npm run build in codesandbox

What is expected?

No typescript errors

What is actually happening?

Got 2 typescript errors:

src/App.vue:17:3 - error TS2322: Type 'Node[]' is not assignable to type '{ key: number; checked: boolean; }[]'.
  Type 'Node' is not assignable to type '{ key: number; checked: boolean; }'.
    Types of property 'checked' are incompatible.
      Type 'Ref<boolean>' is not assignable to type 'boolean'.

17   nodes.value = array;
     ~~~~~~~~~~~

src/App.vue:32:23 - error TS2345: Argument of type '{ key: number; checked: boolean; }' is not assignable to parameter of type 'Node'.
  Types of property 'checked' are incompatible.
    Type 'boolean' is not assignable to type 'Ref<boolean>'.

32       @input="onInput(toRaw(node))"
                         ~~~~~~~~~~~


Found 2 errors.

Additonal content (SFC where the errors happen)

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

interface Node {
  key: number
  checked: Ref<boolean>
}

const nodes = ref<Node[]>([])

onMounted(() => {
  const array: Node[] = new Array<Node>()

  for (const i of [0, 1, 2]) {
    array.push({ key: i, checked: ref(false) })
  }
  nodes.value = array
})

function onInput(node: Node) {
  console.log('onInput', node)
}
</script>

<template>
  <div v-for="node in nodes" :key="node.key">
    <input
      :id="'check-' + node.key"
      :name="'check-' + node.key"
      type="checkbox"
      v-model="node.checked"
      @input="onInput(toRaw(node))"
    />
    <label :for="'check-' + node.key">{{ node.key }}</label>
  </div>
</template>

[johnsoncodehk]

This is ref type issue, please forward to upstream.

// test.ts
import { toRaw, onMounted, Ref, ref } from 'vue'

interface Node {
    key: number
    checked: Ref<boolean>
}

const nodes = ref<Node[]>([])

onMounted(() => {
    const array: Node[] = new Array<Node>()

    for (const i of [0, 1, 2]) {
        array.push({ key: i, checked: ref(false) })
    }
    nodes.value = array // Type 'Node[]' is not assignable to type '{ key: number; checked: boolean; }[]'.
})

function onInput(node: Node) {
    console.log('onInput', node)
}

{ // mock template
    for (const node of nodes.value) {
        onInput(toRaw(node)); // Argument of type '{ key: number; checked: boolean; }' is not assignable to parameter of type 'Node'.
    }
}

[mseele]

Thank you for looking into it. What does this mean? A bug in Typescript or Vue?

[johnsoncodehk]

I'm not sure this is a but or design behavior, if it's, you should report to https://github.com/vuejs/core/issues.

Btw you could also check shllowRef, it will keep the source type because it don't do unref.