<p><pre class="brush:php;toolbar:false;">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; };</pre> <p>在这段代码中，我希望 Vue 组件能够接收如下属性 </p> <p>或者 喜欢 </p> <p>sekarang, jika saya menulis kod dengan lebih statik, 喜欢:</p> <pre class="brush:php;toolbar:false;">type ButtonProps = { niat?: "utama" | "menengah" | "loghat" | "bahaya"; saiz?: "kecil" | "sederhana" | "besar"; primer?: boolean; sekunder?: boolean; loghat?: boolean; bahaya?: boolean; }</pre> <p>它有效......但是我还有一些其他代码需要迭代意图选项，并且只是让它量<gt/p> <p>第一个示例有效，但由于某种原因 VUE 抛出错误</p> <blockquote> <p>内部服务器错误：[@vue/compiler-sfc] 类型参数传递给 DefineProps() 必须是文字类型或对接口的引用 或文字类型。</p> </blockquote> <p>这个错误似乎是已知的并且正在被解决，所以看起来</p> <p>在不使用交集的情况下更动态地定义 ButtonProps 的其他方法是什么？</p>

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

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