Typescript : how to use every props from a type except one-CodePudding

I am in React, and I would like to extend my type from another, except from on props.

Here is my case :

import React from 'react';
import { withTheme } from 'styled-components';
import SvgBase, { Props as SvgBaseProps } from '../SvgBase';

export type Props = {
    theme: object;
    isActive: boolean;
} & SvgBaseProps;

const CategoryIcon = ({ theme, isActive, ...props }: Props) => {
    const DEFAULT_COLOR = theme.colors.categories.logo[isActive ? 'active' : 'inactive'];
    return <SvgBase defaultColor={DEFAULT_COLOR} {...props} />;
};

export default withTheme(CategoryIcon);

I would like to extend every props from SvgBase except defaultColor, as it is define inside my CategoryIcon Component.

CodePudding user response：

You can use Omit to do that, that would give :

import React from 'react';
import { withTheme } from 'styled-components';
import SvgBase, { Props as SvgBaseProps } from '../SvgBase';

export type Props = {
    theme: object;
    isActive: boolean;
} & Omit<SvgBaseProps, 'defaultColor'>;

const CategoryIcon = ({ theme, isActive, ...props }: Props) => {
    const DEFAULT_COLOR = theme.colors.categories.logo[isActive ? 'active' : 'inactive'];
    return <SvgBase defaultColor={DEFAULT_COLOR} {...props} />;
};

export default withTheme(CategoryIcon);```