Typescript: Find The Different Between 2 Types of Properties

Photo by Ferenc Almasi on Unsplash

When we work on Typescript, especially when we work with React. Most of the time, it’s easy to get confused about which one to use to cover all the needed properties.

In my use case, I want to extend my custom link components from <a> attributes.

interface ComponentProps1 extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {}

interface ComponentProps2 extends React.HTMLAttributes<HTMLAnchorElement> {}

type Dif = Omit<ComponentProps1, keyof ComponentProps2>;
type Dif2 = Omit<React.ComponentPropsWithRef<'a'>, keyof React.AnchorHTMLAttributes<HTMLAnchorElement>>;

If we mouse over the Dif or Dif2 in IDE (e.g. VSCode), we might see the difference between both props.

Ref: Try it on Typescript Playground