SvelteKit+TypeScript事件处理：类型赋值错误求助

问题分析 #

报错核心原因：HTMLElement.textContent的返回类型是string | null，而你的expression是string类型，TypeScript严格类型检查不允许将null赋值给string类型变量。另外代码存在逻辑错误——else分支里的expression += expression会重复拼接表达式自身，而非追加按钮对应的内容。

具体修复方案 #

1. 处理类型不匹配问题 #

提供两种常用的安全处理方式：

方式一：非空断言（适合确定按钮必有文本的场景）

用!断言textContent不会为null，将类型缩小为string：

<script lang="ts">
    let expression = '0';

    function handleClick(event: MouseEvent) {
        let value = (event.currentTarget as HTMLElement).textContent!;
        if (expression === '0') {
            expression = value;
        } else {
            expression += value;
        }
    }
</script>

方式二：空值合并运算符（更安全，兼容极端情况）

若担心按钮可能无文本内容，用??提供默认值，确保value始终为string类型：

<script lang="ts">
    let expression = '0';

    function handleClick(event: MouseEvent) {
        let value = (event.currentTarget as HTMLElement).textContent ?? '';
        if (expression === '0') {
            expression = value;
        } else {
            expression += value;
        }
    }
</script>

2. 修正逻辑错误 #

原代码else分支的expression += expression会导致点击按钮时重复拼接当前表达式（比如expression为8时，点击后变成88），不符合计算器输入逻辑，需改为expression += value以正确追加按钮内容。

完整修复后的代码示例 #

<script lang="ts">
    let expression = '0';

    function handleClick(event: MouseEvent) {
        let value = (event.currentTarget as HTMLElement).textContent ?? '';
        if (expression === '0') {
            expression = value;
        } else {
            expression += value;
        }
    }
</script>

<main class="container">
    <div class="calc">
        <input type="text" class="calc__display" bind:value={expression} />
        <div class="calc__buttons">
            <button on:click={handleClick}>8</button>
            <button on:click={handleClick}>7</button>
            <button on:click={handleClick}>9</button>
            <button on:click={handleClick}>&divide;</button>
        </div>
        <!-- 其余按钮 -->
    </div>
</main>

内容的提问来源于stack exchange，提问作者M.J.