I was looking at https://github.com/microsoft/TypeScript/issues/57488, and based off of this, created a new React app with the following code:

import React from 'react';
const child = 'Example' as (React.ReactNode | Element);

function App() {
  return <div>
    <div />
    { /* @ts-expect-error */ }
    {child}
  </div>
}

export default App;

In VS Code, two errors (2322 and 2578) appear on the ts-expect-error line:

Type ‘ReactNode | Element’ is not assignable to type ‘ReactNode’

Unused ‘@ts-expect-error’ directive.

However, when the code is run, the following errors are present:

TS2746: This JSX tag’s ‘children’ prop expects a single child of type ‘ReactNode’, but multiple children were provided.

TS2578: Unused ‘@ts-expect-error’ directive.

Which errors should be showing up and why do these differ?

I tried moving the App.tsx file to another location, and it only shows the Unused ‘@ts-expect-error’ directive error. Also, if the outer div tags are replaced with Fragment tags <> and </>, only the Unused ‘@ts-expect-error’ directive is still present.