@ts-expect-error not ignoring next line correctly in JSX, and errors are reported on the same line

Bắt đầu với bản tái hiện TypeScript Playground được liên kết và so sánh hai trường hợp JSX trong đó @ts-expect-error được đặt trước một biểu thức con. Theo dõi cách các chẩn đoán về phần tử con JSX và vị trí của directive được liên kết, sau đó xác minh rằng directive sẽ chặn lỗi dự kiến mà không tạo ra chẩn đoán về directive không được sử dụng.

🔎 Search Terms

"tsx expect error", "jsx expect error"

🕗 Version & Regression Information

It seems as though @ts-expect-error reports errors on the wrong line, when used inside JSX. For example:

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

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

The error in this case is:

Type 'ReactNode | Element' is not assignable to type 'ReactNode'.
  Type 'Element' is not assignable to type 'ReactNode'.
    Type 'Element' is missing the following properties from type 'ReactPortal': type, props, key(2322)
Unused '@ts-expect-error' directive.(2578)

I would have expected no error though, given that that's the behavior when other children are added. Other examples that work are:

function TestIgnoringOnLineAbove() {
    return <Component>
    {/* @ts-expect-error */} <-- moved expect *above* the div, works correctly
    <div />
    {child}
    </Component>
}

I'd expect this to not work though, given that the error is actually on the line with {child} in it

⏯ Playground Link

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4BYAKCswFcA7DYCeuAYV0nqXpgAoA3lTgi4aABbAANgBMi9KgF8AXHAFxhoidLk9VydDAB0BjADkIMpEoCUazSKIxaUVgB4ZwAG4A+Adtl5RTcAek9fJSoqNBYAZ3gAmTgAXgIAUQAPFHApJHw4FFi4PlNjUosrOAAfODTckB4YGyjKOkYYZlYAFSR4ixgASQBzemhgeiG+OyFKUTgnF3cOcBZGnwc4D284EPXZ0QEQgCo4AAEYWIBaJAywJAxrqBwoOCOQxQ3-SVkP-ZFQ5ZcNaRaitBhMFhwHrxYajKDjSbTDYLVybQGrXh7OaHE7nK43O4PJBPaCvd6fRK-OYAzgYmB7X40cEdSHQwYjMYTADy9AAMuMkABBABGEC8SCm9j+8yQzlRbnR3Exn2OZwu11u9xgj2eZKpoi2Xh2WIOlI2NJWSvpSiAA

💻 Code

import React from 'react';

function Component({
    children
}: { 
    children: React.ReactNode
}) {
    return <div>{children}</div>
}

const child = 'Example' as (React.ReactNode | Element)

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

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

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

🙁 Actual behavior

@ts-expect-error was reported unused, and an error was reported on the line including ts-expect error

🙂 Expected behavior

@ts-expect-error should suppress the error, regardless of whatever other elements are added as children prior to the element.

Additional information about the issue

No response