core: Error: [@vue/compiler-sfc] Failed to resolve index type into finite keys

The magical comment is not a good DX friendly solution, IMHO

If understand correctly this issue (which I also ran into) basically means that Vue 3 only supports “trivial” TypeScript types for props.

In my opinion this in fact means that “Vue does not actually support TypeScript (but just a small subset of it)” - while the documentation misstates that it “provides first-class TypeScript support”.

Please either fix the issue or at least change the documentation to state that the TypeScript support is “limited” at best and not “first class” at all.

The original repro (and any usage that used a Props interface that extends external types) seemed to work in 3.2, but the 3.2 behavior was actually silently ignoring the extends. So it allowed those props to be passed at the type / IDE level, but at runtime they are not treated as actual props, but fallthrough attrs.

It was an oversight in 3.2 - technically we should’ve just thrown errors in this case. But somehow many users considered this a “workaround” or accidentally relied on it without realizing it’s being ignored for runtime codegen. However, this may be exactly what the user wants in certain scenarios, e.g. they just want a component to allow all HTML attrs at the type level, but treat them as fallthrough attrs.

In 3.3, the compiler will now actually attempt to resolve the base type, and in this case the base type involves a complex type that is not supported, so it fails with an error.

I’ve made this case to produce a more specific error message in 82350721 - the commit also allows you to explicitly ignore the extend (i.e. the 3.2 behavior) with an inline /* @vue-ignore */ comment. This should allow 3.2 code that used to work to retain the same behavior.

Any news about this?

Vue doesn’t aim to be a fully functional typescript resolver, so this issue will never be resolved since vue doesn’t use typescript api, but a custom resolver based on babel AST. It only tries to resolve basic types we use (because creating a working type resolver requires a lot of work - see checker.ts!). If you rely on these complex types, I’ve created a new project: https://github.com/so1ve/unplugin-vue-complex-types which uses the typescript compiler’s API to resolve these types. It’s not finished yet, but stay tuned! 😃

Update: It has basic functionality now, but pretty slow! 😦

This is a rather strange situation, it turns out that if you want to use basic html attributes on a component, you have to specify them all explicitly or use a hack with ignore comment.

Given that we have attribute passing down, and we don’t need to validate them, vue-tsc could suggest valid attributes for html elements by itself.

This seems like a more elegant solution for a situation where we don’t need to validate attributes in runtime.

@yyx990803, сan you share your thoughts?

As a workaround, component definition with defineComponent in vue 3.3 (doc) works well with complex types. I think it works on both SFC and TSX.

<script lang="ts">
import { h } from 'vue';

export default defineComponent((props: ComplexType, context) => {
  return () => h('div')
}, { props: ['prop1', 'prop2'] })
</script>

<!-- or -->

<script lang="tsx">
export default defineComponent((props: ComplexType, context) => {
  return () => <div></div>
}, { props: ['prop1', 'prop2'] })
</script>