TypeScript无法识别JSX组件默认属性，为何报错TS2739？

问题代码 #

interface Point {
  x: number;
  y: number;
}

function A({x, y}: Point = {x: 1, y: 1}) {
  return `x:${x}y:${y}`;
}

// 报错 TS2739
export default function App() {
  return <A/>; 
}

// 正常运行
export default function App() {
  return <>{A()}</>; 
}

核心原因 #

TypeScript对JSX组件的props检查逻辑和直接函数调用存在本质差异：

• 直接调用A()时，函数参数为undefined，此时你设置的默认值{x:1,y:1}会生效，解构后x、y都是合法的number类型，完全符合Point接口要求。
• 使用JSX语法<A/>时，React（或TS的JSX类型规则）会向组件传递**空对象{}**而非undefined。此时函数A的参数是{}，解构后x、y为undefined，不符合Point接口中x、y必须为number的强制要求，因此触发TS2739类型错误。

简言之：你的函数默认值仅在参数为undefined时生效，但JSX调用时传递的是空对象，默认值不会触发，导致解构出的变量类型不匹配。

解决方案 #

方案1：拆分默认值到解构字段上

将默认值直接绑定到解构的x、y上，同时允许props为空对象：

function A({x = 1, y = 1}: Partial<Point> = {}) {
  return `x:${x}y:${y}`;
}

Partial<Point>会将Point的所有属性转为可选，适配JSX传递空对象的场景，同时字段默认值保证x、y始终有合法值。

方案2：定义可选的Props类型

直接声明props的属性为可选，从根源上匹配JSX的传递逻辑：

interface PointProps {
  x?: number;
  y?: number;
}

function A({x = 1, y = 1}: PointProps) {
  return `x:${x}y:${y}`;
}

方案3：显式传递默认Props（不推荐）

如果坚持使用Point接口，可在JSX调用时显式传入符合类型的props：

export default function App() {
  return <A x={1} y={1}/>;
}

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