Wrong typescript errors when using ref inside ref

[mseele]

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.

See also: vuejs/language-tools#908

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>

[LinusBorg]

This is a Caveat that is not really a bug. the unwrapped interface of a node is:

// pseudo-name
interface UnwrappedNode {
  key: number
  checked: boolean
}

which is different from the plain Node interface.

The value returned by the nodes ref is UnwrapRef<Node[]>, not Node[], because it's an reactive array/object, which unwraps nested refs.

So to make TS happy, you have to wrap the array in reactive() before assigning it. As that would happen anyway after you added it, this isn't real extra work.

node.value = reactive(array)

This is a Typescript caveat we need to document, but nothing we can "fix".

[posva]

Duplicate of #3478