Typescript: dynamic list from array of tuples, no intersection

Question

const intents = ["primary", "secondary", "accent", "danger"] as const;
const buttonSizes = ["small", "medium", "big"] as const;
type IntentType = (typeof intents)[number];
type SizeType = (typeof buttonSizes)[number];

type ButtonProps = {
  intent?: IntentType;
  size?: SizeType;
} & {
  [K in IntentType as `${Lowercase<K>}`]?: boolean;
};

In this code, I hope that the Vue component can receive the following properties

or like

now, if I write the code more statically, like:

type ButtonProps = {
  intent?: "primary" | "secondary" | "accent" | "danger";
  size?: "small" | "medium" | "big";
  primary?: boolean;
  secondary?: boolean;
  accent?: boolean;
  danger?: boolean;
}

It works...but I have some other code that needs to iterate over the intent options and just have it keep repeating...

The first example works, but for some reason VUE throws an error

Internal server error: [@vue/compiler-sfc] type parameter passed to DefineProps() must be a literal type or a reference to an interface or text type.

This bug appears to be known and being resolved, so it appears

What are other ways to define ButtonProps more dynamically without using intersection?

Answer 1

Given that the error says "Referencing an interface or literal type", I'm assuming that defining ButtonProps as an interface extending a base type should work:

type IntentAndSize = {
  [K in IntentType as `${Lowercase<K>}`]?: boolean;
};

interface ButtonProps extends IntentAndSize {
  intent?: IntentType;
  size?: SizeType;
}

Playground