Astro client-side script with Typescript

Currently I want to use Astro to build a simple website, but currently I cant use the tag with Typescript in my components.

The code of the component:

<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>

Then I get the error

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?

And yes the file exits and the error goes away when I convert it to js with

<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>

Then its working, but I want typescipt
The deps are:

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

And my 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"
            }
        ]
    }
}

Is there something wrong with my code or config or is this not possible with astro?

Ok after changing an import from

import * as packageJson from 'package.json';

to

import * as packageJson from '@/package.json';

and the tsconfig path to

"paths": {
    "@/*": ["./*"],
    "@components/*": ["./src/components/*"],
    "@layouts/*": ["./src/layouts/*"],
    "@pages/*": ["./src/pages/*"],
    "@styles/*": ["./src/styles/*"]
}

I dont know what the problem was, but its working… yay?