我在一个TypeScript项目中定义了一个名为Theme的接口,它有一个名为typography的属性。typography属性应该有一个基于名为TypographyVariant的枚举的动态属性集。下面是我的代码:
export type TypographyVariant =
| 'label-large'
| 'label-medium'
| 'label-small';
export interface Theme {
typography: {
[key: TypographyVariant]: {
lineHeight: string;
fontSize: string;
letterSpacing?: string;
fontWeight?: number;
};
};
}
const theme: Theme {
typography: {
'label-large': {
lineHeight: '20px',
fontSize: '14px',
letterSpacing: '0.1px',
fontWeight: 500,
},
'label-medium': {
lineHeight: '16px',
fontSize: '12px',
letterSpacing: '0.5px',
fontWeight: 500,
},
'label-small': {
lineHeight: '16px',
fontSize: '11px',
letterSpacing: '0.5px',
fontWeight: 500,
},
}
};
我的代码编辑器将theme
中的typography
对象视为{}
类型,而不是我在Theme
接口中定义的类型。
问题是当我尝试定义主题对象时,我的代码编辑器将typography属性视为空对象,而不是Theme接口中定义的动态属性集。我不确定为什么会发生这种情况,也不知道如何解决它。有人能帮我找出问题所在吗?谢谢!
1条答案
按热度按时间3vpjnl9f1#
您当前的类型定义了
typography
,这样它只能包含来自TypographyVariant
的键,但是如果我理解正确的话,您需要任何typography
来定义 * 所有 * 变量。使用
Record
定义typography
是一种很好的方法: