Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic slots error with generics #4538

Open
csisy opened this issue Jul 5, 2024 · 1 comment
Open

Dynamic slots error with generics #4538

csisy opened this issue Jul 5, 2024 · 1 comment

Comments

@csisy
Copy link

csisy commented Jul 5, 2024

Vue - Official extension or vue-tsc version

2.0.26

VSCode version

1.91.0

Vue version

3.4.31

TypeScript version

5.5.3

System Info

No response

Steps to reproduce

Trying to build a table component which has a single generic parameter, representing the type of the data row. Column definitions are given according to this type.

<script setup lang="ts" generic="T extends { [K in keyof T]: T[K] } & { id: PropertyKey }">

// definition of a column
export type ColumnDef<T> = {
  // the property is a key of the generic type
  property: keyof T & string;
  title: string;
};

I'd like to define the slot names and the corresponding props:

// this is the type of the column template; receives the given row and the value based on the given 'property' of the column def.
type ColumnTemplateData<K extends keyof T> = {
  row: T;
  value: T[K];
};

// we will have slots in the `column-{keyof T}` format with these props
defineSlots<{
  [K in keyof T as `column-${K & string}`]: (_: ColumnTemplateData<K>) => any;
}>();

Try to define a slot with a generated name:

<div v-for="col in columns" :key="col.property">
  <!-- error: Type '`column-${UnwrapRef<keyof T & string>}`' cannot be used to index type [...] -->
  <slot :name="`column-${col.property}`" :row="row" :value="row[col.property]">
    <span>{{ row[col.property] }}</span>
  </slot>
</div>

What is expected?

Based on other threads and PR #8374, this should report no errors.

What is actually happening?

When the slot is defined an error is generated:

Type '`column-${UnwrapRef<keyof T & string>}`' cannot be used to index type 'Readonly<{ [K in keyof T as `column-${K & string}`]: (_: ColumnTemplateData<K>) => any; }> & { [K in keyof T as `column-${K & string}`]: (_: ColumnTemplateData<K>) => any; }'.ts-plugin(2536)

Link to minimal reproduction

https://github.com/csisy/vue-dynamic-slots-repro

Any additional comments?

If you try the example (npm run dev), you can see that it actually works runtime.

@csisy
Copy link
Author

csisy commented Jul 5, 2024

Might be related? #3787

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant