英文:
Type of nested object with variable keys from a list
问题
我有以下两个对象，用于定义按钮的变量样式。```typescriptinterface 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;};}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论