Svelte+TS标签属性内类型声明报错问题求助

问题根源 #

Svelte的模板编译器在解析HTML内联事件属性里的代码时，对TypeScript显式类型标注的语法（比如let modal: any里的冒号）处理存在bug——模板解析器会先按HTML属性的规则扫描内容，冒号会被误判为属性分隔符，导致语法解析失败，抛出Unexpected tokents(-1)错误。而隐式any因为没有显式的冒号语法，能绕过这个解析问题，所以可以正常运行。

解决办法 #

1. 优先把逻辑移到script标签中（推荐）

把内联事件里的逻辑抽离到组件的<script lang="ts">块中，这样TypeScript语法能被正常解析，代码也更易维护：

<script lang="ts">
  const handleButtonClick = () => {
    let modal: any;
    // 这里写你的业务逻辑
  };
</script>

<button on:click={handleButtonClick}>点击按钮</button>

2. 用类型断言替代显式类型标注（临时方案）

如果一定要写在内联事件里，可以用as any类型断言来代替显式的:any标注，避免触发解析bug：

<button on:click={() => {let modal = {} as any; /* 你的逻辑 */}}></button>

内容的提问来源于stack exchange，提问作者eyyy7