Typoskript: dynamische Liste aus einem Array von Tupeln, keine Schnittmenge
P粉163951336
P粉163951336 2023-08-31 23:02:45
0
1
461
<p><pre class="brush:php;toolbar:false;">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; };</pre> <p>在这段代码中,我希望 Vue 组件能够接收如下属性 </p> <p>或者 喜欢 </p> <p>Wenn ich den Code jetzt statischer schreibe, wird Folgendes angezeigt:</p> <pre class="brush:php;toolbar:false;">type ButtonProps = { Absicht?: "primär" | "sekundär" | „Akzent“ | „Gefahr“; Größe?: "klein" | „mittel“ | "groß"; primär?: boolean; sekundär?: boolean; Akzent?: boolean; Gefahr?: boolean; }</pre> <p> <p>第一个示例有效,但由于某种原因 VUE 抛出错误</p> <blockquote> <p>内部服务器错误:[@vue/compiler-sfc] 类型参数传递给 DefineProps() ist eine neue Funktion für die Verwendung von DefineProps() 或文字类型.</p> </blockquote> <p>这个错误似乎是已知的并且正在被解决,所以看起来</p> <p>
P粉163951336
P粉163951336

Antworte allen(1)
P粉384244473

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

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

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

游乐场

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage