How can I create generic component based on union type?

[szulcus]

This works for me (based on object):

<script lang="ts" setup generic="T extends DataType">
	export type DataType = Record<string, string>;

	type Slots = {
		[K in keyof T as K extends string ? `tab:${K}` : never]?:(_: { value: T[K] }) => any;
	}
	defineSlots<Slots>();

	interface Props {
		itemData: DataType;
	}
	const props = defineProps<Props>();
</script>

<template>
	<div>
		<slot :name="'tab:dd'" :value="('fffd' as T[string])" />
		<template v-for="(value, key) of props.itemData">
			<slot
				v-if="typeof key === 'string'"
				:name="`tab:${key}`"
				:value="(value as T[string])"
			/>
		</template>
	</div>
</template>

... and this not (based on string union type):

<script lang="ts" setup generic="T extends string">

	type Slots = Record<`tab:${T}`, (props: {}) => any>;
	defineSlots<Slots>();

	interface Props {
		tabs: string[];
	}
	const props = defineProps<Props>();
</script>

<template>
	<div>
		<slot :name="'tab:test1'" />
		<template v-for="tab of props.tabs">
			<slot :name="`tab:${tab}`" />
		</template>
	</div>
</template>

Element implicitly has an 'any' type because expression of type '"tab:test1"' can't be used to index type 'Record<`tab:${T}`, (props: {}) => any>'.
  Property 'tab:test1' does not exist on type 'Record<`tab:${T}`, (props: {}) => any>'.ts(7053)