Skrip taip: senarai dinamik daripada tatasusunan tupel, tiada persimpangan

Question

const intents = ["primer", "secondary", "accent", "bahaya"] sebagai const;
butang constSaiz = ["kecil", "sederhana", "besar"] sebagai const;
jenis IntentType = (jenis niat)[nombor];
taip SizeType = (typeof buttonSizes)[nombor];

taip ButtonProps = {
  niat?: IntentType;
  saiz?: SizeType;
} & {
  [K dalam IntentType sebagai `${Huruf kecil<K>}`]?: boolean;
};

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

或者 喜欢

sekarang, jika saya menulis kod dengan lebih statik, 喜欢:

type ButtonProps = {
  niat?: "utama" | "menengah" | "loghat" | "bahaya";
  saiz?: "kecil" | "sederhana" | "besar";
  primer?: boolean;
  sekunder?: boolean;
  loghat?: boolean;
  bahaya?: boolean;
}

它有效......但是我还有一些其他代码需要迭代意图选项，并且只是让它量

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

内部服务器错误：[@vue/compiler-sfc] 类型参数传递给 DefineProps() 必须是文字类型或对接口的引用 或文字类型。

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

在不使用交集的情况下更动态地定义 ButtonProps 的其他方法是什么？

Answer 1

Memandangkan ralat mengatakan "Rujukan kepada antara muka atau jenis literal", saya menganggap mentakrifkan ButtonProps sebagai antara muka yang memanjangkan jenis asas sepatutnya berfungsi:

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

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

Taman permainan