Using v-for on an object with key/value, the key is typed as number

[mbergen]

This is the same issue as #8819, but i cannot reopen that one.

It seems to me that the issue reappeared, the original reproducer shows the key to be string | number even with the latest version available on play.vuejs.org

https://play.vuejs.org/#eNp9UmFLwzAQ/StHELZB3XD7VraBygT94ET9ZoTV7la7pUlI0jop/e9eUrdVkPVDyb17effetTW71npYlchiNrWpybUDi67UIBKZzThzlrM5l6mS1oFD65YfW0xdDDW87WKwzuQyez8coIEZ1FwC7PD7KoZelYgSx73oFxqfIC4bLrvCd6VMXa4kKfQTk9HtVjMCquhiWw1gNm8nGLJpJKwuas9uYgiHcbMKytNRm4a8U+Gw0CJxSBXAdJ1XUF1ulKF8/WAn8uYGkMtORM4gJpQ49A5LAHrq+o/ZPvUiCBoDaGguyY9In9jTUWcqi2iTlHWTZ8OtVZLWHUJwlqpC5wLNUns92jatth3FWSKE+noImDPk8oCnn5ju/sG3du8xzp4MWjQVcnbsOVoOUijfXrw84p7Ox2ah1qUg9pnmM1olSu+xpd2Uck22O7zg9r7Qyjj6UK92sXco7SGUN+qZTeBzRv/c7ZnoJ7uT4STco8/Kmh/qs+TD

Originally posted by @syyyr in #10963 (comment)

[linzhe141]

I couldn't reproduce the issue in VS Code, so this should be a bug in the playground.

[mbergen]

I couldn't reproduce the issue in VS Code, so this should be a bug in the playground.

I can reproduce it in VS Code when using a nested object, will add an example to the description

Edit: My example was incorrect (or rather, the type was correctly shown as string|number there). Sorry for the noise.

[oliver139]

This is an issue about TypeScript instead and seems it is a correct behavior:
https://www.typescriptlang.org/docs/handbook/2/keyof-types.html

Note that in this example, M is string | number — this is because JavaScript object keys are always coerced to a string, so obj[0] is always the same as obj["0"].

I would suggest you to use Record<string, string> instead.

[mbergen]

This is an issue about TypeScript instead and seems it is a correct behavior: https://www.typescriptlang.org/docs/handbook/2/keyof-types.html

Note that in this example, M is string | number — this is because JavaScript object keys are always coerced to a string, so obj[0] is always the same as obj["0"].

I would suggest you to use Record<string, string> instead.

That is probably the source of it, but i'd argue it is still wrong.
When iterating over such an object, the key I'll get is never going to be a number, it is always a string. Or am i wrong, and iterating preserves the key as it was entered, which means there is no coercion of the stored key, only for lookup?

[oliver139]

This is an issue about TypeScript instead and seems it is a correct behavior: typescriptlang.org/docs/handbook/2/keyof-types.html

Note that in this example, M is string | number — this is because JavaScript object keys are always coerced to a string, so obj[0] is always the same as obj["0"].

I would suggest you to use Record<string, string> instead.

That is probably the source of it, but i'd argue it is still wrong. When iterating over such an object, the key I'll get is never going to be a number, it is always a string. Or am i wrong, and iterating preserves the key as it was entered, which means there is no coercion of the stored key, only for lookup?

But anyway, it is still a TypeScript issue instead of Vue🤔
You may want to create an issue inn TypeScript repo for dicussion instead

[Bricek4]

还真是