英文:
Type of nested object with variable keys from a list
问题
我有以下两个对象，用于定义按钮的变量样式。
```typescript
interface colorProps {
cyan: string;
white: string;
gray: string;
}
interface variantProps {
solid: string;
outline: string;
}
type styleProps = { // 未使用
[Key in keyof variantProps]: {[key in keyof colorProps]: string} | colorProps | string | keyof colorProps;
}
interface CustomProps {
[key: string]: string | {[key: string]: string} | keyof colorProps | colorProps | variantProps | keyof variantProps;
}
const baseStyles: CustomProps = {
solid: 'xxx',
outline: 'xxx',
}
const variantStyles: CustomProps = {
solid: {
cyan: 'xxx',
white: 'xxx',
gray: 'xxx',
},
outline: {
gray: 'xxx',
},
}
我已经定义了按钮的输入属性类型如下：
interface ButtonProps {
href?: string;
variant?: keyof variantProps;//'solid' | 'outline';
color?: keyof colorProps;//'cyan' | 'white' | 'gray';
className?: string;
}
我正在尝试做一些在其他类型语言中很容易做到的事情，即：
variantStyles[variant][color]
所以我试图根据 variant 和 color 的值获取正确的样式。正如你所看到的，我在 CustomProps 中尝试了许多东西（除了只是使用 any 类型），但仍然出现了以下错误：
Element implicitly has an 'any' type because expression of type 'keyof colorProps' can't be used to index type 'string | colorProps | { [key: string]: string; } | variantProps'.
Property 'cyan' does not exist on type 'string | colorProps | { [key: string]: string; } | variantProps'.ts(7053)
英文:
I have the following two objects that define variable styles for a Button.
interface colorProps {
cyan: string;
white: string;
gray: string;
}
interface variantProps {
solid: string;
outline: string;
}
type styleProps = { // unused
[Key in keyof variantProps]: {[key in keyof colorProps]: string} | colorProps | string | keyof colorProps;
}
interface CustomProps {
[key: string]: string | {[key: string]: string} | keyof colorProps | colorProps | variantProps | keyof variantProps;
}
const baseStyles: CustomProps = {
solid: 'xxx',
outline: 'xxx',
}
const variantStyles: CustomProps = {
solid: {
cyan: 'xxx',
white: 'xxx',
gray: 'xxx',
},
outline: {
gray: 'xxx',
},
}
I have defined the type of the input props for the button as such:
interface ButtonProps {
href?: string;
variant?: keyof variantProps;//'solid' | 'outline';
color?: keyof colorProps;//'cyan' | 'white' | 'gray';
className?: string;
}
I am trying to do something that I can easily do in other typed languages, namely just:
variantStyles[variant][color]
So I am trying to get the correct style based on the values of variant and color. As you can see I have tried a bunch of stuff inside CustomProps (apart from just typing any) but still I get:
Element implicitly has an 'any' type because expression of type 'keyof colorProps' can't be used to index type 'string | colorProps | { [key: string]: string; } | variantProps'.
Property 'cyan' does not exist on type 'string | colorProps | { [key: string]: string; } | variantProps'.ts(7053)
答案1
得分: 0
将CustomProps接口更改为：
interface CustomProps {
[key: string]: {
[key: string]: string | keyof colorProps | colorProps | variantProps | keyof variantProps;
};
}
英文:
Change the CustomProps interface to:
interface CustomProps {
[key: string]: {
[key: string]: string | keyof colorProps | colorProps | variantProps | keyof variantProps;
};
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论