title: Most common example of Jest custom matcher in TypeScript fails to detect extended interface
body: <p>I am using Jest v27.4.7 and have looked at numerous examples of how to implement a custom matcher in Jest with TypeScript.</p>
  <p>I have the following code:</p>
  <pre><code>declare global {
    namespace jest {
      interface Matchers&lt;R&gt; {
        boundingBoxMatch(updatedBoundingBox: BoundingBox.Interface): R;
      }
    }
  }
  
  expect.extend({
    boundingBoxMatch(boundingBox: BoundingBox.Interface, updatedBoundingBox: BoundingBox.Interface) {
      return {
        pass: BoundingBox.isEqualTo(updatedBoundingBox, boundingBox),
        message: () =&gt; JSON.stringify(updatedBoundingBox),
      };
    },
  });
  
  </code></pre>
  <p>This code works well, but does not satisfy typechecking. All examples I have seen online imply that it should.</p>
  <p>Here is what I see in VSCode:</p>
  <p><a href="https://i.stack.imgur.com/rJIlB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rJIlB.png" alt="enter image description here" /></a></p>
  <p>If I rewrite the declaration in the way the typechecking implies it should be expressed I am able to get things working just fine. It looks like this:</p>
  <pre><code>declare global {
    namespace jest {
      interface Expect&lt;R = any&gt; {
        boundingBoxMatch(updatedBoundingBox: BoundingBox.Interface): JestMatchers&lt;R&gt;;
      }
    }
  }
  </code></pre>
  <p><strong>Is this a correct implementation?</strong>  My confusion arises because my solution directly contradicts the official Jest documentation:</p>
  <p><a href="https://i.stack.imgur.com/dnA9e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dnA9e.png" alt="enter image description here" /></a></p>
  <p>I would expect following their documentation to work out of the box.</p>