TS2536 thrown when using a conditional type with `keyof` for a generic type parameter

[mettekou]

Vue version

3.4.21

Link to minimal reproduction

https://play.vuejs.org/#eNqVU02P0zAQ/SuDL12kfohlT1G7K0ArAV3BaqnEoalQm0yKdx07sp3SKuS/8+w0pQdUiZM9329m3jTiXVWNdzWLRExdZmXlybGvK1JrvZ2lwrtU3KZalpWxnh6k81RYU1IqxpMghdhUpHo66aLhC8FzWam1Z0hEUxWiEgmlQ8ZlI/OEbq6HKLFhldDgIytlhvTdWJW/GrSrVFBwHr3wAf4y7+XoD018oZwg/XRyVksMgTczupDb8bMzGk01AUEqMlNWUrH9WnlpNHpKKFqCbY3qvz5Hnbc1D3t99pOzl3/on90+6FLxaNmx3aH/k82v7ZZ9Z77/9oX3+J+MpclrBe8Lxid2RtUBY+f2vtY5YJ/5RbSf4jqk3i7c/d6zdn1TAWjwbKN/KrCdDxda/wv37fgmxqW6xRT7zV5iBW1Zs5UZxMU5Rxry5okLR23HlAHyDAIrsBjwoLKmcjSjnAup+TFI04gn8iOhxXLVS3M+nLAu5yQ1gRGmoMVqdBcc5yvCDFnnjpy3mAb9Jl2XG7b4uEO5MQofTDCWyumO5pSQ5h0GGnpd9un6gg8dIf+r5IWk7e3V677tputv2DfWfWJBDGp2nNlVnA6CLpwTDqpWx188LtqNCmPDpcAvQI6VsKDkeEAQl8eyuK1TKFHToYrGCGVFLRhwzDxRsi84iRXPbg0c+YGOA+/AEZBnfP1GtH8Ah39r4g==

Steps to reproduce

Create a component with a generic type parameter T and prop x for which the type is a conditional type used with the keyof operator to select some of the keys of T. Try to access key x for a value of type T in the template for the component.

What is expected?

No type error is thrown and when the component is used in another component, only the keys of properties of the right type are allowed to be passed in for x.

What is actually happening?

Type error TS2536 is thrown.

System Info

No response

Any additional comments?

No response

[Shyam-Chen]

{{ item[itemLabel as keyof typeof item] }}

[mettekou]

{{ item[itemLabel as keyof typeof item] }}

@Shyam-Chen While this resolves the issue for itemLabel, it does not resolve the issue for itemKey in the key prop.

[Shyam-Chen]

To string.

:key="`${item[itemKey as keyof typeof item]}`"

[mettekou]

To string.

:key="`${item[itemKey as keyof typeof item]}`"

@Shyam-Chen That does not preserve the type number | string | symbol.

[itsmnthn]

probably typescript 5.4 causing this

vuejs/pinia#2605 (comment)

[jh-leong]

maybe this is a workaround: playground, hope this helps :)

[yyx990803]

Looks like a language tool issue? (transferred to language-tools, @johnsoncodehk let me know this should be fixed in core)

[kermanx]

I think this is a TypeScript limitation, which can be reproduced without Vue. See TS playground link.