HTMLElment 使用<>断言不成功

Question

我想通过 document.getElmentByid 获取id为mian的dom元素，并且添加HTMLElment类型，但是使用as 就可以 <>却不行

下面用的是as断言，成功

<template>
   <div id="main" style="width: 100%; height: 600px"></div>
</template>

<script setup lang="ts">
const main = document.getElementById('main') as HTMLElement
</script>

<style lang="scss" scoped></style>
<template>
   <div id="main" style="width: 100%; height: 600px"></div>
</template>

<script setup lang="ts">
const main = document.getElementById('main') as HTMLElement
</script>

<style lang="scss" scoped></style>

下面用的是<>断言 失败 提示JSX 元素“HTMLElement”没有相应的结束标记

<template>
   <div id="main" style="width: 100%; height: 600px"></div>
</template>

<script setup lang="ts">
const main = <HTMLElement>document.getElementById('main') 
</script>

<style lang="scss" scoped></style>

这是为什么呢？