如何在TypeScript-React中为含可选默认字段对象的命名可选参数定义类型？

我想实现类似原生HTML组件中style属性的效果：

<div ref={ref} style={{ overflow: 'visible', height: 600, width: '100%' }}>

style本身是可选属性，传入的对象内的字段同样可选（且带有默认值）。我尝试查看源码但完全看不懂。

我已尝试的方案 #

function a({
  param1 = 'default param1',
  options = { option1: 'default option1', option2: 'default option2' },
}: {
  param1?: string;
  options?: { option1?: string; option2?: string };
}) {
  console.log(param1);
  console.log(options);
}

a({});
a({ param1: 'my param1' });
a({ param1: 'my param1', options: { option1: 'my option1' } });

运行结果：

[LOG]: "default param1" 
[LOG]: {
  "option1": "default option1",
  "option2": "default option2"
} 
[LOG]: "my param1" 
[LOG]: {
  "option1": "default option1",
  "option2": "default option2"
} 
[LOG]: "my param1" 
[LOG]: {
  "option1": "my option1"
} 

这个方案几乎可行，但当我仅传入options中的option1时，options的默认值会被完全覆盖。请问如何为options中的每个字段单独设置默认值？

解决方案 #

方式1：解构时直接为子字段设默认值 #

通过嵌套解构，给每个子字段单独指定默认值，同时为外层options设置空对象默认值避免报错：

function a({
  param1 = 'default param1',
  options: {
    option1 = 'default option1',
    option2 = 'default option2'
  } = {},
}: {
  param1?: string;
  options?: { option1?: string; option2?: string };
}) {
  const options = { option1, option2 };
  console.log(param1);
  console.log(options);
}

调用后，仅传入option1时，option2会保留默认值，完全符合需求。

方式2：对象展开合并默认配置 #

如果子字段较多，可将默认配置单独提取，再通过展开运算符合并传入值与默认值：

const defaultOptions = {
  option1: 'default option1',
  option2: 'default option2'
};

function a({
  param1 = 'default param1',
  options = {},
}: {
  param1?: string;
  options?: { option1?: string; option2?: string };
}) {
  const mergedOptions = { ...defaultOptions, ...options };
  console.log(param1);
  console.log(mergedOptions);
}

这种方式更易维护，新增字段只需修改defaultOptions即可，效果与方式1完全一致。

关键注意点 #

• 使用方式1时，必须给options设置= {}的默认值，否则不传options参数时，解构子字段会因options为undefined抛出错误。
• 两种方式都能实现类似HTML style的效果：父属性可选，子字段可选且各自保留默认值。

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