TypeScript React 无需defaultProps的可选Props更优类型定义方式

Props定义 #

直接使用TS可选属性标记符?定义可选属性，是官方推荐的标准写法，类型效果与& Partial<{className: string}>完全一致，但可读性更高：

import type { ReactNode } from 'react';
import type { LottieProps } from '对应lottie组件的类型路径';

type ScheduleBoxContentProps = {
  // 必传属性直接声明
  desc: ReactNode;
  lottie: LottieProps;
  // 可选属性加?即可，无需额外包裹Partial
  className?: string;
};

组件实现 #

普通函数组件本身不会自动注入children类型，只要Props定义中没有声明children，传入children时TS会直接抛出类型错误，完全符合「禁止默认children」的需求，无需使用React.FC：

const ScheduleBoxContent = ({ desc, lottie, className }: ScheduleBoxContentProps) => {
  return (
    <div className={className}>
      {/* 内部渲染desc、lottie */}
    </div>
  );
};

• 所谓「未为className提供默认值」的提示，不是TS类型系统的内置报错，通常是开启了ESLint的react/require-default-props规则导致的。TS本身不会对可选Props强制要求设置默认值。
• 如果直接传className给div出现TS类型不匹配的报错，说明你使用的是旧版本@types/react（旧版本要求className必须为非空字符串），建议升级到最新稳定版；如果不想升级，直接在解构时加默认值即可，不需要挂载defaultProps：

  // 仅在需要兜底逻辑时加默认值，属于业务逻辑处理，不是类型要求
  const ScheduleBoxContent = ({ desc, lottie, className = '' }: ScheduleBoxContentProps) => {
    // 业务逻辑
  };
  

• & Partial<{xxx: type}>更适合批量将一组属性设为可选的场景，单个可选属性用?标记是最直观的写法，维护成本更低。

defaultProps是类组件时代的遗留写法，目前React官方对函数组件更推荐用解构默认值处理可选属性的兜底逻辑，无需额外挂载静态属性，TS类型推导也更顺畅。当前场景下完全不需要强制使用defaultProps。

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