Error Parsing error: Unterminated JSX contents in TypeScript code

I manually added typescript to a minimal vuejs project created using vue cli without typescript.

The issue is that < and > in ts code confuse the jsx engine which gives an error. I’m not new with vue but I have no experience with typescript and JSX (btw, which I don’t plan to use). I’d appreciate some help.

A minimal code snippet showing the problem could be:

<template>
  <div id="app"></div>
</template>

<script lang="ts">
import { Item } from '../cli/models/Item'

export default {
  async created() {
      const client = await this.$api.getClient();
      const response2 = await client.getItem(1);
      const myObject: Item = <Item>response2;
      // //////////////////////////////////////////////////////////
      // I also tried this
      // const myObject: Item = response2 as Item;
      // and get another error:
      // error  Parsing error: Unexpected token, expected ";"
      // const myObject: Item = response2 as Item;
      //                                  ^
      // //////////////////////////////////////////////////////////
  },
};
</script>

Error:

 ERROR  Failed to compile with 1 errors                                                                                     11:43:17 PM

 error  in ./src/App.vue

Module Error (from ./node_modules/eslint-loader/index.js):

/home/paolo/devel/foo/stack-2001/fe/vue/project/src/App.vue
  19:33  error  Parsing error: Unterminated JSX contents

   7 |       const client = await this.$api.getClient();
   8 |       const response2 = await client.getItem(1);
>  9 |       const myObject: Item=<Item>response2;
     |                                  ^
  10 |   },
  11 | };

Item:

/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */

export interface Item {
    name: string;
    description?: string;
    price: number;
    tax?: number;
}

Here is my tsconfig.json

{
    "compilerOptions": {
      "target": "es6",
      "module": "esnext",
      "strict": false,
      "importHelpers": true,
      "moduleResolution": "node",
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "sourceMap": true,
      "baseUrl": ".",
      "types": [
        "webpack-env",
        "node",
        "vue/types",
        "vue-router/types"
      ],
      "paths": {
        "@/*": [
          "src/*"
        ]
      },
      "lib": [
        "esnext",
        "dom",
        "dom.iterable",
        "scripthost"
      ]
    },
    "include": [
      "src/**/*.ts",
      "src/**/*.tsx",
      "src/**/*.vue",
      "tests/**/*.ts",
      "tests/**/*.tsx"
    ],
    "exclude": [
      "node_modules"
    ]
  }

.eslintrc

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/prettier',
    '@vue/typescript/recommended',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
}

babel.config.js

module.exports = {
  presets: [['@vue/app', { useBuiltIns: 'entry' }]],
}