TS2488 When use object in v-for

[cawa-93]

I have component:

<template>
...
      <li
        v-for="(version, lib) in versions"
        :key="lib"
      >
        <strong>{{ lib }}</strong>: v{{ version }}
      </li>
...
</template>

<script lang="ts">
export default defineComponent({
  setup() {
    const {versions} = useElectron()
    // It makes no sense to make "versions" reactive
    return {versions} // Version is ftat object {node: '14', chrome: '86' ... }
  },
})
</script>

In Runtime it works as expected. But checking the types falls with a error:

Error: src/components/About.vue(8,34): error TS2488: Type 'Readonly<Record<string, string>>' must have a '[Symbol.iterator]()' method that returns an iterator.

[johnsoncodehk]

This is expected, you can add & { [Symbol.iterator](): IterableIterator<VALUE_TYPE> } to your type for fix.

[cawa-93]

OK. This really fixed the problem. I wonder what caused this behavior. It doesn't seem intuitive.

[johnsoncodehk]

You should make sure the object can use with for...of, for example:

declare let foo: Record<string, string>;
for (const item of foo) { } // TS2488 

declare let bar: Record<string, string> & { [Symbol.iterator](): IterableIterator<string> };
for (const item of bar) { } // works

[johnsoncodehk]

I found that for...in can better to handle it, and it was fixed in vue-tsc 0.0.14. Sorry for make the confusion.