如何修复TypeScript中兼容HTML锚点与Link组件的泛型代码错误？

问题描述 #

你想要创建一个可作为普通HTML锚点或Link组件复用的React组件，但当前代码触发了两个TS2322类型错误，代码及错误提示如下：

import React, { ComponentProps, ReactNode } from 'react';
// 假设Link来自react-router-dom这类路由库
import { Link } from 'react-router-dom';

type AnchorProps<Component extends 'a' | typeof Link> = ComponentProps<Component> & { 
  children: ReactNode;
  color?: 'blue' | 'red';
  component?: Component;
};

const Anchor = <Component extends 'a' | typeof Link, >({ 
  children, 
  color = 'blue', 
  // error TS2322: Type '"a"' is not assignable to type 'Component | (ComponentClass<any, any> & Component) | (FunctionComponent<any> & Component)'.
  component: Component = 'a',
}: AnchorProps<Component>) => {
  // error TS2322: Type '{ children: ...; className: string; }' is not assignable to type '(IntrinsicAttributes & LibraryManagedAttributes<Component, any>) | ...'.
  return <Component className={`anchor ${color}`}>{children}</Component>;
};

export default Anchor;

错误分析与修复 #

咱们逐个拆解并解决这两个问题：

1. 第一个错误：默认值类型不匹配

原因：泛型参数Component没有设置默认类型，直接把'a'赋值给Component变量时，TypeScript无法确认这个默认值和泛型参数的兼容性。

修复步骤：

• 给泛型Component设置默认类型为'a'
• 对默认值'a'做类型断言，让TypeScript认可它符合泛型类型要求

修改后的参数部分：

const Anchor = <Component extends 'a' | typeof Link = 'a'>({ 
  children, 
  color = 'blue', 
  component: Component = 'a' as Component, // 添加类型断言
}: AnchorProps<Component>) => {

2. 第二个错误：Props传递不完整

原因：你只传递了children和className，但AnchorProps继承了ComponentProps<Component>，意味着目标组件可能需要其他必填属性（比如Link组件的to属性），且你没有把这些额外props传递给Component。

修复步骤：

• 解构出除children、color、component之外的剩余props
• 把剩余props和className一起传递给目标组件

修改后的组件逻辑：

const Anchor = <Component extends 'a' | typeof Link = 'a'>({ 
  children, 
  color = 'blue', 
  component: Component = 'a' as Component,
  ...rest // 解构剩余props
}: AnchorProps<Component>) => {
  return <Component {...rest} className={`anchor ${color}`}>{children}</Component>;
};

完整修复后的代码 #

import React, { ComponentProps, ReactNode } from 'react';
import { Link } from 'react-router-dom';

type AnchorProps<Component extends 'a' | typeof Link> = ComponentProps<Component> & { 
  children: ReactNode;
  color?: 'blue' | 'red';
  component?: Component;
};

const Anchor = <Component extends 'a' | typeof Link = 'a'>({ 
  children, 
  color = 'blue', 
  component: Component = 'a' as Component,
  ...rest
}: AnchorProps<Component>) => {
  return <Component {...rest} className={`anchor ${color}`}>{children}</Component>;
};

export default Anchor;

这样修改后，两个TS错误就都解决了：

• 泛型有了默认类型，默认值通过类型断言匹配泛型类型
• 所有需要的props都通过...rest传递给了目标组件，完全符合ComponentProps<Component>的类型约束

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