React+TypeScript：接口继承下必填Props与默认Props配置问题

问题场景 #

开发React组件AnimOpcY时，需求明确：

• children为必填项
• 其他props（如mainControls、queueOrder等）为非必填且带有默认值

但由于组件的props接口IAnimOpcY继承了包含必填children的IChildrens接口，声明defaultProps时触发TS2741错误，提示缺少children属性，自动修复建议添加children: undefined不符合需求。

解决方案 #

核心思路是让defaultProps只负责可选属性的默认值，children作为必填项由组件调用时传入，不纳入defaultProps。通过调整类型定义和组件的props类型即可解决：

步骤1：修改类型定义文件 #

将defaultProps的类型改为Omit<IAnimOpcY, 'children'>，排除必填的children属性，同时保持IAnimOpcY继承IChildrens以确保children必填：

import { AnimationControls } from "framer-motion";
import { IChildrens } from "../react/react-types";

export interface IAnimOpcY extends IChildrens{
    mainControls?: AnimationControls | string,
    queueOrder?: number,
    delay?: number,
    delayMultiplier?: number,
    duration?: number
}

// 用Omit排除children，只给可选属性设置默认值
export const defaultProps: Omit<IAnimOpcY, 'children'> = {
    mainControls: "visible",
    queueOrder: 0,
    delay: .3,
    delayMultiplier: .1,
    duration: .3,
};

步骤2：调整组件的props类型 #

组件的props类型直接使用IAnimOpcY即可，React会自动合并defaultProps和传入的props，TypeScript会正确识别children为必填，其他props会自动应用默认值：

import React from "react";
import {motion} from "framer-motion";
import {IAnimOpcY, defaultProps} from "@/types/anim/anim-opc-y";

// 直接使用IAnimOpcY作为props类型
const AnimOpcY = (props : IAnimOpcY) => {
  return (
    <motion.div
      variants={{
        hidden: {opacity: 0, y: 10},
        visible: {opacity: 1, y: 0},
      }}
      initial="hidden"
      animate={props.mainControls}
      transition={{
        duration: props.duration,
        delay: props.delay + (props.queueOrder * props.delayMultiplier),
        ease: "easeIn",
      }}
    >
      {props.children}
    </motion.div>
  );
};

AnimOpcY.defaultProps = defaultProps;

export default AnimOpcY;

原理说明 #

• Omit<IAnimOpcY, 'children'>从IAnimOpcY中移除children属性，让defaultProps只包含需要设置默认值的可选属性，避免TypeScript报错。
• 组件props类型使用IAnimOpcY，确保children是必填项，调用组件时必须传入，而其他未传入的props会自动使用defaultProps中的值。

验证效果 #

调用组件时，TypeScript会强制要求传入children，但可以省略其他props：

// 合法：传入children，其他props用默认值
<AnimOpcY>
  <div>动画内容</div>
</AnimOpcY>

// 合法：自定义部分props
<AnimOpcY delay={0.5} duration={0.4}>
  <div>自定义动画参数的内容</div>
</AnimOpcY>

// 不合法：未传入children，TypeScript会报错
<AnimOpcY />

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