const intents = ["primary", "secondary", "accent", "danger"] as const;
const buttonSizes = ["small", "medium", "big"] as const;
type IntentType = (typeof intents)[number];
type SizeType = (typeof buttonSizes)[number];
type ButtonProps = {
intent?: IntentType;
size?: SizeType;
} & {
[K in IntentType as `${Lowercase<K>}`]?: boolean;
};
在这段代码中,我希望 Vue 组件能够接收如下属性
或者 喜欢
now, if I write the code more statically, 喜欢:
type ButtonProps = {
intent?: "primary" | "secondary" | "accent" | "danger";
size?: "small" | "medium" | "big";
primary?: boolean;
secondary?: boolean;
accent?: boolean;
danger?: boolean;
}
它有效......但是我还有一些其他代码需要迭代意图选项,并且只是让它一直重复......
第一个示例有效,但由于某种原因 VUE 抛出错误
内部服务器错误:[@vue/compiler-sfc] 类型参数传递给 DefineProps() 必须是文字类型或对接口的引用 或文字类型。
这个错误似乎是已知的并且正在被解决,所以看起来
在不使用交集的情况下更动态地定义 ButtonProps 的其他方法是什么?
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
鉴于错误显示“引用接口或文字类型”,我假设将
ButtonProps定义为扩展基本类型的接口应该有效:type IntentAndSize = { [K in IntentType as `${Lowercase<K>}`]?: boolean; }; interface ButtonProps extends IntentAndSize { intent?: IntentType; size?: SizeType; }游乐场