What problem does this feature solve?

Let's say I have a datatable with the following prop:

  @Prop({ default: () => [] }) private rows!: Array<any>;

And it is used in a lot of different places with different types of data.

Example:

    <DataTable
      :rows="animals"
      <template v-slot:columns="{ row }">
        <td>{{row.animalName}}</td>
      </template>
    </DataTable>

Since there is no way for the prop to inherit the type of what I put into rows linting won't work and each row is always seen as type any.

This means that I can write row.nonExistantAttribute and there is no way for the linter to see that this is wrong. This increases the risk for human error significantly since there is no smooth way as of now to solve this issue that I'm aware of (or any of the ones I asked for help)

What does the proposed API look like?

Add a way for props to inherit the type from what I put into it.

Maybe something like this could work to tell the prop that this is not something that is decided by this component but rather the component that uses this component.

@Prop({ default: () => [] }) private rows!: Array<?>;
@Prop({ default: () => [] }) private rows!: <?>;

So that when I write for example:

    <DataTable
      :rows="animals"
      <template v-slot:columns="{ row }">
        <td>{{row.animalName}}</td>
      </template>
    </DataTable>

it knows that each row is an Animal

This won't be possible, at least inside Vue. Maybe in a VSCode plugin, but you should open an issue on the plugins repo (Vetur Vue dx).

The type should be added where the any is at @Prop({ default: () => [] }) private rows!: Array<any>;

@posva Well I can't really add the type if I want it to be a generic datatable. Replacing any would render it completely useless since I want to be able to use it with any type of data.

Would prop type inheritance (prop inheriting the type from the component that sets the prop data) be imposible within Vue and have to be handled by a plugin?