Typoskript: dynamische Liste aus einem Array von Tupeln, keine Schnittmenge

Question

const intents = ["primär", "sekundär", "Akzent", "Gefahr"] as const;
const buttonSizes = ["klein", "mittel", "groß"] as const;
type IntentType = (typeof intents)[number];
type SizeType = (typeof buttonSizes)[number];

Typ ButtonProps = {
  Absicht?: IntentType;
  Größe?: SizeType;
} & {
  [K in IntentType als `${Lowercase<K>}`]?: boolean;
};

在这段代码中,我希望 Vue 组件能够接收如下属性

或者 喜欢

Wenn ich den Code jetzt statischer schreibe, wird Folgendes angezeigt:

type ButtonProps = {
  Absicht?: "primär" | "sekundär" | „Akzent“ | „Gefahr“;
  Größe?: "klein" | „mittel“ | "groß";
  primär?: boolean;
  sekundär?: boolean;
  Akzent?: boolean;
  Gefahr?: boolean;
}

第一个示例有效,但由于某种原因 VUE 抛出错误

内部服务器错误:[@vue/compiler-sfc] 类型参数传递给 DefineProps() ist eine neue Funktion für die Verwendung von DefineProps() 或文字类型.

这个错误似乎是已知的并且正在被解决，所以看起来

Answer 1

鉴于错误显示“引用接口或文字类型”，我假设将 ButtonProps 定义为扩展基本类型的接口应该有效：

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

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

游乐场