React函数组件TypeScript类型错误：输入组件问题排查与解决

错误原因 #

当前组件的类型定义将IContainer与InputHTMLAttributes/TextareaHTMLAttributes的联合类型交叉，导致...rest的类型是联合类型。TypeScript无法根据as属性的具体值，自动将rest的类型与渲染的Comp元素类型做关联匹配，因此抛出类型不兼容的错误——联合类型的属性集合无法直接赋值给单一元素的属性约束。

解决方法 #

使用泛型来关联as的类型和对应的HTML元素属性类型，让TypeScript能精准推导属性与元素的对应关系：

import "./styles.css";

type InputType = "input" | "textarea";

// 用泛型T约束as的类型，关联对应的属性类型
interface IContainer<T extends InputType> {
  name: string;
  placeholder: string;
  as: T;
}

// 定义工具类型，根据T映射对应的HTML属性类型
type ComponentProps<T extends InputType> = 
  T extends "input" 
    ? React.InputHTMLAttributes<HTMLInputElement>
    : React.TextareaHTMLAttributes<HTMLTextAreaElement>;

const Container = <T extends InputType>({
  name,
  placeholder,
  as,
  ...rest
}: IContainer<T> & ComponentProps<T>) => {
  const Comp = as;
  return <Comp name={name} placeholder={placeholder} {...rest} />;
};

export default function App() {
  return (
    <div className="App">
      <Container name="hi" as="textarea" placeholder="start" />
      <Container name="name" as="input" placeholder="enter name" />
    </div>
  );
}

关键改动说明 #

• 引入泛型T，将as的类型与组件属性类型绑定
• 通过条件类型ComponentProps<T>，根据as的具体值动态推导对应的HTML元素属性类型
• 这样TypeScript能明确知道：当as="input"时，rest是InputHTMLAttributes；当as="textarea"时，rest是TextareaHTMLAttributes，从而消除类型不匹配错误

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