TypeScript. Type instantiation is excessively deep and possibly infinite. How to fix.

I’ve just started a migration to TypeScript. I see many unknown and not obvious linter’s messages everyday. Not always I know how to manage them.

One of the messages is:

Type instantiation is excessively deep and possibly infinite.ts(2589)

Visual Studio Code IDE displays it to me for a component. The most unpleasant thing that the whole component is underlined with the red wave line. Makes reading the code very difficult.

The problem hides in StyledComponents file. We need to describe a type of a styled component like I’m showing below.

const InputContainer = styled(Container)`
&& {
   width: ${props => props.width || 500}px;
}
` as typeof Container

UPD 1: Also you could try to use the following way
(thanks to Daniel Ostapenko):

const InputContainer = styled(Container)<typeof Container>`
  ...
`

After adding the type everything starts working well.

Do you know other cases and solutions? Please share in comments below. Thank you!

Happy coding!