Astro组件中使用TypeScript客户端脚本报错求助

问题描述 #

在Astro组件的客户端<script>中使用TypeScript语法时出现加载错误，改用JavaScript后恢复正常。

TS版本组件代码（报错） #

<header>
    <nav>
        <a id="logo" href="/">
            <img src="/path.svg" alt="S" />
            <label>oftwareschmiede</label>
        </a>
        <div>
            <label for="nav-toggle">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </label>
            <input type="checkbox" id="nav-toggle" hidden />
            <ul class="container">
                <li>
                    <a href="dienstleistungen">Dienstleistungen</a>
                </li>
                <li>
                    <a href="projekte">Projekte</a>
                </li>
                <li>
                    <a href="referenzen">Referenzen</a>
                </li>
                <li>
                    <a href="blog">Blog</a>
                </li>
            </ul>
        </div>
    </nav>
</header>

<script>
        const navToggle = document.querySelector<HTMLInputElement>('#nav-toggle')!;
        const navToggleLabel = document.querySelector<HTMLInputElement>('label[for="nav-toggle"]')!;
        document.addEventListener('click', ev => {
            if (navToggle.checked && !navToggle.contains(ev.target as any) && !navToggleLabel.contains(ev.target as any)) {
                navToggle.checked = false;
            }
        });
</script>

报错信息 #

Failed to load url /home/zokki/projects/website/src/components/Header.astro?astro&type=script&index=0&lang.ts (resolved id: /home/zokki/projects/website/home/zokki/projects/website/src/components/Header.astro?astro&type=script&index=0&lang.ts) in /home/zokki/projects/website/src/components/Header.astro. Does the file exist?

JS版本脚本（正常运行） #

<script define:vars={{ message: 'Now its JS' }}>
        const navToggle = document.querySelector('#nav-toggle');
        const navToggleLabel = document.querySelector('label[for="nav-toggle"]');
        document.addEventListener('click', ev => {
            if (navToggle.checked && !navToggle.contains(ev.target) && !navToggleLabel.contains(ev.target)) {
                navToggle.checked = false;
            }
        });
</script>

依赖配置 #

"dependencies": {
    "@astrojs/ts-plugin": "^1.1.3",
    "astro": "^3.0.10",
    "sass": "^1.66.1",
    "typescript": "^5.2.2"
},

tsconfig.json配置 #

{
    "extends": "astro/tsconfigs/strictest",
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "*": ["*"],
            "@components/*": ["src/components/*"],
            "@layouts/*": ["src/layouts/*"],
            "@pages/*": ["src/pages/*"],
            "@styles/*": ["src/styles/*"]
        },
        "plugins": [
            {
                "name": "@astrojs/ts-plugin"
            }
        ]
    }
}

原因与解决方案 #

Astro默认不会将组件内的普通<script>标签识别为TypeScript脚本，结合路径解析问题，可通过以下步骤解决：

1. 显式声明脚本语言类型
   在<script>标签中添加lang="ts"属性，告知Astro这是TypeScript代码：

<script lang="ts">
        const navToggle = document.querySelector<HTMLInputElement>('#nav-toggle')!;
        const navToggleLabel = document.querySelector<HTMLLabelElement>('label[for="nav-toggle"]')!;
        document.addEventListener('click', ev => {
            if (navToggle.checked && !navToggle.contains(ev.target as Node) && !navToggleLabel.contains(ev.target as Node)) {
                navToggle.checked = false;
            }
        });
</script>

2. 修复路径解析冲突
   报错信息中出现重复路径，是tsconfig.json里"*": ["*"]配置导致的路径解析异常，移除该行配置即可：

{
    "extends": "astro/tsconfigs/strictest",
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@components/*": ["src/components/*"],
            "@layouts/*": ["src/layouts/*"],
            "@pages/*": ["src/pages/*"],
            "@styles/*": ["src/styles/*"]
        },
        "plugins": [
            {
                "name": "@astrojs/ts-plugin"
            }
        ]
    }
}

3. 验证依赖与缓存
   Astro 3.x完全支持客户端TypeScript脚本，执行npm install重新安装依赖，清除开发缓存后重启服务即可生效。

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