Vue-cli: TypeScript Cast-Operator makes ESLint treat valid TypeScript as JSX

[vainamov]

Version

3.0.0-rc.10

Node and OS info

Node 10.8.0 / npm 6.2.0 / Windows 10

Steps to reproduce

1. Create a new Vue project with TypeScript and ESLint.
2. Create a .vue file with a component and include a <script lang="ts">-tag.
3. Use the TypeScript cast operator (<Type>object) anywhere in the script tag.
4. Run npm run lint.

Example code that produces the error:

<script lang="js">

    import { Component, Prop, Vue } from "vue-property-decorator";

    @Component
    export default class Navigation extends Vue {

        @Prop(String) private scrollTarget!: string;

        mounted(): void {
            if (!this.scrollTarget) {
                return;
            }

            window.addEventListener("scroll", ev => {
                if (window.scrollY > ((<HTMLElement>document.querySelector(this.scrollTarget)).offsetTop + (<HTMLElement>document.querySelector(this.scrollTarget)).offsetHeight)) {
                    console.log("Scrolled past!");
                }
            });
        }

    }

</script>

What is expected?

ESLint should have no complaints and everything should work fine.

What is actually happening?

ESLint determines the cast operator as an opening tag of HTML and thus declares the whole code to JSX.

When including the line with the console.log call, ESLint demands a closing curly bracket after the closing quotemark.

When commenting the same line, ESLint states

JSX element 'HTMLElement' has no corresponding closing tag

[LinusBorg]

As far as I can tell, that's expected behaviour of TypeScript and documented here:

https://www.typescriptlang.org/docs/handbook/jsx.html

The proposed solution is to use the as operator instead.