Typescript: タプルの配列からの動的リスト、交差なし

Question

const インテント = ["プライマリ", "セカンダリ", "アクセント", "危険"] as const;
const buttonSizes = ["小さい"、"中"、"大きい"] as const;
type IntentType = (インテントのタイプ)[数値];
type SizeType = (ボタンサイズの種類)[数値];

タイプ ButtonProps = {
  インテント?: インテントタイプ;
  サイズ?: サイズタイプ;
} & {
  [IntentType の K は `${小文字<K>}` として]?: ブール値;
};

このコードでは、Vue コンポーネントが次のプロパティを受け取ることができることを期待しています。

または のように

ここで、次のようにコードをより静的に書いてみます。

type ButtonProps = {
  意図?: "プライマリ" | "セカンダリ" | "アクセント" | "危険";
  サイズ?: "小" | "中" | "大";
  プライマリ?: ブール値;
  二次?: ブール値;
  アクセント?: ブール値;
  危険?: ブール値;
}

それは機能します...しかし、インテントオプションを反復処理して、それを繰り返し続ける必要があるコードが他にもいくつかあります...

最初の例は機能しますが、何らかの理由で VUE がエラーをスローします

<ブロック引用>

内部サーバー エラー: [@vue/compiler-sfc] 型パラメータが渡されました DefineProps() はリテラル型またはインターフェイスへの参照である必要があります またはテキストタイプ。

このバグは既知で解決されているようですので、

交差を使用せずに ButtonProps をより動的に定義する他の方法は何ですか?

Answer 1

エラーに「インターフェイスまたはリテラル型を参照しています」と表示されていることから、基本型を拡張するインターフェイスとして ButtonProps を定義すると機能すると思います。

リーリー ＃＃＃＃＃＃遊び場＃＃＃＃＃＃