Чтобы использовать функцию `withDefaults` для вложенных объектов в TypeScript, вы можете создать такую функцию, которая будет объединять значения по умолчанию с теми, которые передаются в качестве аргумента. При этом можно воспользоваться функцией `Object.assign` или оператором расширения (`...`) для глубокого объединения объектов.
Рассмотрим пример, в котором мы хотим применять дефолтные стили к компоненту с возможностью переопределения только некоторых стилей:
1. Определите интерфейсы для ваших `props` и дефолтных стилей.
2. Создайте функцию `withDefaults`, которая будет объединять эти значения.
Вот пример кода, который иллюстрирует эту концепцию:
```typescript
interface CssStyles {
width?: string;
border?: string;
display?: string;
}
interface Props {
css?: CssStyles;
}
const defaultStyles: CssStyles = {
width: '100%',
border: '1px solid black',
display: 'block',
};
// Функция для объединения стилей с дефолтными
function withDefaults(props: Props): CssStyles {
return {
...defaultStyles,
...props.css,
};
}
// Пример компонента
const MyComponent: React.FC<Props> = (props) => {
const styles = withDefaults(props);
return (
<div style={styles}>
{/* Контент вашего компонента */}
</div>
);
};
// Использование компонента
const App = () => {
return (
<div>
<MyComponent css={{ width: '50%' }} />
</div>
);
};
export default App;
```
### Объяснение:
1. **Определение интерфейсов**: Мы создали интерфейс `CssStyles`, который определяет структуру объектов стилей. Интерфейс `Props` имеет необязательное свойство `css`, которое может содержать стили.
2. **Дефолтные стили**: Определили объект `defaultStyles`, который содержит значения по умолчанию для стилей.
3. **Функция `withDefaults`**: Эта функция принимает `props`, извлекает стили из `props.css`, а затем объединяет их с дефолтными стилями (`defaultStyles`), при этом легко переопределяя любые из них.
4. **Использование компонента**: В `App` мы используем `MyComponent` и передаем отдельное свойство `css`, только переопределяя `width`, оставаясь с остальными значениями по умолчанию.
Таким образом, вы можете легко расширять и переопределять только нужные стили, что упрощает поддержку и расширение кода.