面试题：TypeScript下React组件Props的联合类型与可选属性约束实践

Question

创建一个React按钮组件，该组件有一个`variant`属性，其类型可以是`'primary'`、`'secondary'`或`'tertiary'`中的一种，同时有一个可选的`disabled`属性，类型为布尔值。请用TypeScript实现对该组件Props的约束，并阐述联合类型和可选属性在这种场景下的作用。

Answer 1

1. 使用TypeScript实现对该组件Props的约束

import React from 'react';

// 定义Props接口
interface ButtonProps {
  variant: 'primary' |'secondary' | 'tertiary';
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ variant, disabled }) => {
  return (
    <button disabled={disabled} className={`button-${variant}`}>
      {variant} Button
    </button>
  );
};

export default Button;

2. 联合类型和可选属性在这种场景下的作用

• 联合类型的作用：variant属性使用联合类型'primary' |'secondary' | 'tertiary'，这意味着variant只能取这三个特定的值中的一个。这种约束在开发过程中可以避免传入不合法的值，从而减少运行时错误。例如，如果意外传入'invalid'作为variant的值，TypeScript编译器会报错，提醒开发者修正错误，保证了代码的健壮性和可读性。
• 可选属性的作用：disabled属性使用可选属性?，表示该属性不是必需的。在实际使用中，并不是每个按钮都需要禁用状态，通过设置为可选属性，开发者在使用Button组件时可以选择是否传入disabled属性。如果没有传入，disabled会保持未定义状态，组件可以按照默认逻辑运行（例如，按钮可点击）。这样增加了组件的灵活性，使得组件在不同场景下都能方便地使用。