面试题：TypeScript 可选参数在 React 组件中的使用

Question

假设你正在开发一个 React 组件，该组件接收一些属性。其中有一个属性是用于控制组件是否显示一个额外的提示信息，这个属性是可选的。请用 TypeScript 编写该组件的类型定义以及组件代码，展示如何正确处理这个可选参数，并且要考虑到属性默认值的设置以及类型安全检查。

Answer 1

import React from 'react';

// 类型定义
interface MyComponentProps {
  // 控制是否显示额外提示信息的可选属性，默认值为 false
  showExtraTip?: boolean; 
}

// 组件代码
const MyComponent: React.FC<MyComponentProps> = ({ showExtraTip = false }) => {
  return (
    <div>
      {showExtraTip && <p>这是额外的提示信息</p>}
    </div>
  );
};

export default MyComponent;