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

February 24, 2022

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.

>Solution :

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);```