TypeScript类型转换失效：字符串参数无法赋值给StylesProps类型

代码定义 #

TypeScript类型定义 #

export type ShadowClass = 'left' | 'right';
export type MarginClass = 'leftMargin' | 'rightMargin';

export type StylesProps = ThemeProps & {
  shadowClass: ShadowClass;
  marginClass: MarginClass;
};

边距渲染函数 #

const renderMargin = ({ marginClass, theme }: StylesProps) => {
  switch (marginClass) {
    case 'leftMargin':
      return `0 0 0  -${theme.spaces.default}`;
    case 'rightMargin':
      return `0 -${theme.spaces.default} 0 0`;
    default:
      return `0`;
  }
};

错误场景 #

调用renderMargin时仅传入marginClass：

css`
  margin: ${renderMargin(marginClass)};
`

出现TypeScript错误：

Argument of type 'string' is not assignable to parameter of type 'StylesProps'. Type 'string' is not assignable to type 'StylesProps'.
Type 'string' is not assignable to type 'ThemeProps'.

尝试类型转换后仍无效：

css`
  margin: ${renderMargin(marginClass as MarginClass)};
`

解决方法 #

传入符合StylesProps类型的完整对象参数：

css`
  margin: ${renderMargin({ marginClass, shadowClass, theme })};
`

原因说明 #

renderMargin函数的参数类型被定义为StylesProps，要求传入包含theme、shadowClass、marginClass的对象。之前仅传入marginClass字符串，完全不符合参数类型要求，类型转换也无法改变“单个字符串≠完整对象”的本质，因此必须传入结构完整的对象。

内容的提问来源于stack exchange，提问作者meez