Typescript : liste dynamique à partir d'un tableau de tuples, pas d'intersection

Question

const intents = ["primaire", "secondaire", "accent", "danger"] comme const;
const ButtonSizes = ["petit", "moyen", "grand"] as const;
tapez IntentType = (type d'intentions)[numéro] ;
tapez SizeType = (type de taille de bouton)[nombre] ;

tapez ButtonProps = {
  intention ? : IntentType ;
  taille ? : Type de taille ;
} & {
  [K dans IntentType comme `${Lowercase}`] ? : booléen ;
};


或者
喜欢

maintenant, si j'écris le code de manière plus statique, 喜欢:
type ButtonProps = {
  intention ? : « primaire » | "secondaire" | "accent" | "danger";
  taille?: "petit" | "moyen" | "grand" ;
  primaire ? : booléen ;
  secondaire ? : booléen ;
  accent ? : booléen ;
  danger ? : booléen ;
}

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

内部服务器错误：[@vue/compiler-sfc]
DefineProps() est un outil de recherche en ligne
或文字类型。

Answer 1

Étant donné que l'erreur indique "Référence à une interface ou un type littéral", je suppose que définir ButtonProps comme une interface étendant un type de base devrait fonctionner :

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

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

Aire de jeux