TypeScript函数传递部分对象参数时如何自动补全默认字段？

数据老陈

2026-10-5

解决方案

该需求可以完全实现，你现有的写法问题在于默认参数仅在divot参数完全不传入时生效，若传入部分属性的对象，不会自动补全缺失的默认属性，调整方式如下：

核心原理

使用对象展开运算符将默认配置和用户传入的配置合并，用户传入的属性会覆盖默认值，未传入的属性保留默认值。同时将divot参数类型改为Partial<Divot>以支持传入部分属性，还可根据需要调整canvas参数的必填性以适配你的调用示例。

完整实现代码

// 抽离固定的默认配置
const DEFAULT_DIVOT: Divot = {
  step: 8,
  triangleWidth: 4,
  radius: 0.6,
  strokeStyle: '#000'
}

// 调整函数参数：divot类型改为Partial<Divot>，默认值为空对象；如果需要支持仅传divot调用，给canvas加默认值/设为可选
export function DivotTemplate(divot: Partial<Divot> = {}, canvas: HTMLCanvasElement = document.createElement('canvas')): HTMLCanvasElement {
  // 合并得到完整的divot配置
  const mergedDivot = { ...DEFAULT_DIVOT, ...divot }

  // 后续业务逻辑直接使用mergedDivot即可
  // ... 你的原有代码
}

调用验证

执行你给出的示例调用：

DivotTemplate({step: 10});

函数内部拿到的mergedDivot值即为：

{step: 10, triangleWidth: 4, radius: 0.6, strokeStyle: '#000'}

完全符合你的预期。

可选实现：参数解构写法

如果你不需要保留整体的divot对象，也可以直接在参数层面解构给每个属性加默认值：

export function DivotTemplate(
  { step = 8, triangleWidth = 4, radius = 0.6, strokeStyle = '#000' }: Partial<Divot> = {},
  canvas: HTMLCanvasElement = document.createElement('canvas')
): HTMLCanvasElement {
  // 直接使用解构后的step、triangleWidth等变量即可
  // ... 业务逻辑
}

这种写法适合不需要整体操作divot对象的场景，也能达到同样的默认值效果。