Generic type besides generic component

[matheusjv11]

I have a select component which I recieve a fieldEnum as some of the props. Today it expect only a string.

const props = defineProps<{
  fieldEnum: string;
  label: string;
  tooltip?: string;
  disabled?: boolean;
}>();

As I'm going to use this component for some different forms, each of them will have different field enums that composes its object. My idea is pass a generic type that would only be used to define what values fieldEnum can be. It would look something like this:

const props = defineProps<{
  fieldEnum: keyof T;
  label: string;
  tooltip?: string;
  disabled?: boolean;
}>();

Where somehow on my parent component, I would define the T type. This way, whenever I set something on fieldEnum, ts would force me to use only the existing keys from the given Type.

<FormSelectInput<MyType>
  field-enum="some_key"
  label="Fancy Select"
/>

I know that there are some workarounds, such as creating proxy components for each form that can import the select props and require the specific enum. But I'm seeking for a less-code solution. I would be glad if someone could help me on this.

[Shyam-Chen]

const some_key = ref<MyType>({});

[davidmatter]

Just add another prop containing a value of the underlying type. The keyof T prop will be type-checked.

https://play.vuejs.org/#eNp9UsFOwzAM/RUrl23StB3GqXSTAO0AB5hgx1ymzi1ZWydK0lFU9d9xMjYqxDi19nuxn/3ciTtjZscGRSJSl1llPDj0jVlJUrXR1kMHFnPoIbe6hhFTRxfoQdfmOz+bhyBUGt1KkpRpch40LMPrcScJwKPzCSwk9RNJ6fzUjftw4LE21c4jRwBpLJvopRRaCij5S5qwVc4rKqRYpbHXNW5oMySl80F1MRXesbZcFbOD08RjR21SZMxWFdoX4xVrlyKBiARsV1X64ynmvG1wes5n75iVf+QPrg05KTYWHdojSnHB/M4WyAIDvH57xpb/L2Ct903F7H/AV3S6aoLGE+2+oT3LHvCi2sfoEO9r69atR3LnoYLQwOwjXwp2LCzq2ug/chezm/iO/eMtnt3+fTdQ7agILnAZKJDQqozDLTsiaY+5ItxYbVza6QS20zKBEj91Dtt+NZ7w5Vy5i4GJov8CmnXmVA==