TypeScript中使用styled-components的as多态属性实现Typography报错如何解决？

你遇到的类型报错核心原因是TypeScript对variantMap的类型推断过宽，其返回值被识别为通用string类型，而styled-components的as多态属性要求传入合法的HTML标签字面量类型/React组件类型，类型不匹配因此触发报错。

你可以通过以下步骤修复：

1. 给variantMap添加as const断言，锁定其所有键值的字面量类型，避免被TypeScript拓宽为通用string
2. 给Typography组件的props添加类型约束，限制variant的取值只能是variantMap的合法键
3. 修正原有props解构的语法错误（你原代码中({ variant : string })是变量重命名语法，不是类型标注）

修复后的完整代码示例：

import styled from 'styled-components';
import type { ReactNode } from 'react';

// 加as const锁定值的字面量类型
const variantMap = {
  h1: 'h1',
  h2: 'h2',
  h3: 'h3',
  h4: 'h4',
  h5: 'h5',
  h6: 'h6',
  subheading1: 'h6',
  subheading2: 'h6',
  body1: 'p',
  body2: 'p',
} as const;

// 定义variant合法取值类型
type Variant = keyof typeof variantMap;

// 示例样式根节点，你可以替换为自己的样式逻辑
const TypographyRoot = styled.div<{ variant: Variant }>`
  /* 你的样式逻辑，比如根据variant设置font-size、font-weight等 */
`;

// 组件props类型定义
type TypographyProps = {
  variant: Variant;
  children: ReactNode;
} & React.HTMLAttributes<HTMLElement>;

export const Typography = ({ variant, children, ...props }: TypographyProps) => { 
  const selectedComponent = variantMap[variant];
  return (
    <TypographyRoot
      as={selectedComponent}
      variant={variant}
      {...props}
    >
      {children}
    </TypographyRoot>
  );
}

后续你需要扩展更多variant取值时，只需要在variantMap里添加对应键值对即可，TypeScript会自动推导合法的variant范围。

备选方案 #

如果你不适合使用as const断言，也可以手动给variantMap标注类型，直接声明值的类型为React合法元素类型：

import type { ElementType } from 'react';

type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subheading1' | 'subheading2' | 'body1' | 'body2';
const variantMap: Record<Variant, ElementType> = {
  // 原有键值对
};

该写法同样可以满足as属性的类型要求。

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