面试题：TypeScript交叉类型在组件属性合并中的实践

Question

在一个React项目中，有多个基础组件，每个组件都有自己特定的属性类型。现在要创建一个复合组件，它需要融合多个基础组件的属性。请使用TypeScript交叉类型来处理这个需求，并阐述在实际操作过程中可能遇到的类型冲突问题及解决方案。

Answer 1

实现使用TypeScript交叉类型融合基础组件属性

假设我们有两个基础组件 Button 和 Input，它们分别有自己的属性类型：

// Button组件属性类型
type ButtonProps = {
  label: string;
  onClick: () => void;
};

// Input组件属性类型
type InputProps = {
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
};

// 复合组件属性类型，融合Button和Input属性
type CompositeComponentProps = ButtonProps & InputProps;

// 复合组件
const CompositeComponent: React.FC<CompositeComponentProps> = ({
  label,
  onClick,
  value,
  onChange
}) => {
  return (
    <div>
      <button onClick={onClick}>{label}</button>
      <input value={value} onChange={onChange} />
    </div>
  );
};

可能遇到的类型冲突问题及解决方案

1. 同名属性类型冲突
   • 问题描述：当两个基础组件有同名属性，但类型不同时，会产生冲突。例如，Button 和 Input 都有一个名为 id 的属性，Button 的 id 类型为 number，Input 的 id 类型为 string。
   • 解决方案：
     • 重新设计属性名称：避免在不同组件中使用相同名称的属性，这样可以从根本上解决冲突。例如，将 Button 的 id 改为 buttonId，Input 的 id 改为 inputId。
     • 统一属性类型：如果属性语义相同，可以统一属性类型。比如都改为 string 类型，这样在交叉类型中就不会冲突。如果 id 在两个组件中的语义不同，也可以通过重新设计属性名称来区分。
2. 函数参数类型冲突
   • 问题描述：当两个基础组件的同名函数属性，其参数类型不同时会产生冲突。例如，Button 的 onClick 函数没有参数，而 Input 的 onClick 函数接受一个 MouseEvent 参数。
   • 解决方案：
     • 使用联合类型：可以将函数参数类型定义为联合类型。例如，type OnClickType = (() => void) | ((e: MouseEvent<HTMLButtonElement>) => void)，然后在交叉类型中使用这个联合类型作为 onClick 的类型。但这种方式可能会使函数调用时的逻辑变得复杂，需要在实现函数时处理不同的参数情况。
     • 重命名函数：将其中一个组件的函数属性重命名，比如将 Input 的 onClick 改为 onInputClick，这样在交叉类型中就不会有冲突。