面试题：TypeScript交叉类型的应用场景

场景一：组合多个接口的功能

假设我们有两个接口，一个表示用户基本信息，另一个表示用户权限信息。通过交叉类型可以将这两个接口组合成一个新类型，用于表示完整的用户对象。

// 定义用户基本信息接口
interface UserInfo {
  name: string;
  age: number;
}

// 定义用户权限信息接口
interface UserPermissions {
  canRead: boolean;
  canWrite: boolean;
}

// 使用交叉类型组合两个接口
type CompleteUser = UserInfo & UserPermissions;

// 创建一个符合CompleteUser类型的对象
const user: CompleteUser = {
  name: 'John Doe',
  age: 30,
  canRead: true,
  canWrite: false
};

场景二：为组件传递多种类型的属性

在React开发中，一个组件可能需要接收不同类型的属性。例如，一个按钮组件可能既需要基本的样式属性，又需要点击事件处理属性。

// 定义样式属性接口
interface ButtonStyle {
  color: string;
  size: 'small' | 'medium' | 'large';
}

// 定义点击事件处理接口
interface ButtonClickHandler {
  onClick: () => void;
}

// 使用交叉类型组合属性
type ButtonProps = ButtonStyle & ButtonClickHandler;

// 定义按钮组件
const Button = ({ color, size, onClick }: ButtonProps) => (
  <button style={{ color }} onClick={onClick}>{size} Button</button>
);

// 使用按钮组件
const handleClick = () => {
  console.log('Button clicked');
};

<Button color="blue" size="medium" onClick={handleClick} />

面试题：TypeScript交叉类型的应用场景

知识考点

面试题答案

场景一：组合多个接口的功能

场景二：为组件传递多种类型的属性