声明变量后仍提示未定义？Svelte+TypeScript代码报错求助

问题场景 #

在TypeScript脚本中声明了items变量，使用Svelte的{#each}语法遍历该变量时，持续出现以下错误：

Cannot find name 'items'. Did you mean 'item'?
'items' is not defined. Consider adding a block with 'export let items' to declare a prop

尝试修改变量名、复制旧项目代码均无效，原代码如下：

<head>
    <style> 
        html,body {
            margin:0px;
            padding:0px;
        }
        @import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Condensed:wght@300;400&display=swap');
            body{
            font-family: 'Roboto', sans-serif;
            }

            .header{
                background-color: #Dcd517;
                padding: 5px 5px 5px 20px;
                font-size: 16px;
                text-align: center;
                display: flex;
                flex-direction: row;
                margin:0px;
            }
            
            .header h1{
                padding: 0px 8px 0px 0px;
            }
            .header a{
                color: black;
                padding:20px;
                text-align: center;
                width: auto;
                border-radius: 12px;
                font-size: 32px;
                text-decoration:none;
            }

            .header a:hover{
                background-color:#9d940e
            }

            .cnt1{
                display: flex;
                background-color:#127D0B;
                padding: 8px 50px 8px 50px;
            }
            .items{
                display: flex;
                flex-direction: row;
                padding: 8px 8px 0px 8px;
            }

            .items a{
            background-color: #1105dc;
            color: white;
            padding:12px;
            mrgin: 8px;
            text-align: center;
            width: auto;
            border-radius: 12px;
            font-size: 16px;
            text-decoration:none;
            }

            .items img{
                background-color: white;
                margin: 8px;
            }
    </style>
</head>
<body>
    <div class = header>
        <a href="/"> <b> Pot.Io </b></a>
        <a href="/shop"> <b> Shop </b></a>
        <a href="/shop"> <b> Help </b></a>
    </div>
    <script lang="ts">

        let items = [
            {
                name: "test"
            },
        ];
       </script>

    <div class = cnt1>
    {#each items as item}
        <div class = item>
            <h1>{item.name}</h1>
        </div> 
    {/each}
    </div>
</body>

问题原因 #

1. 脚本位置错误：Svelte要求<script>标签必须放在组件的根级别（直接作为组件的顶级元素），原代码将脚本放在了<body>内部，导致Svelte编译器无法识别脚本中的变量，模板自然无法访问。
2. 错误使用页面级标签：普通Svelte组件不需要包裹<html>、<head>、<body>标签，这些是页面入口文件的专属标签，组件内直接编写模板内容、样式和脚本即可。

修复方案 #

步骤1：调整组件结构 #

移除<html>、<head>、<body>标签，将<script lang="ts">块移到组件最顶部，确保它是顶级元素之一。

修改后的代码 #

<script lang="ts">
    let items = [
        {
            name: "test"
        },
    ];
</script>

<style> 
    html,body {
        margin:0px;
        padding:0px;
    }
    @import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Condensed:wght@300;400&display=swap');
    body{
        font-family: 'Roboto', sans-serif;
    }

    .header{
        background-color: #Dcd517;
        padding: 5px 5px 5px 20px;
        font-size: 16px;
        text-align: center;
        display: flex;
        flex-direction: row;
        margin:0px;
    }
    
    .header h1{
        padding: 0px 8px 0px 0px;
    }
    .header a{
        color: black;
        padding:20px;
        text-align: center;
        width: auto;
        border-radius: 12px;
        font-size: 32px;
        text-decoration:none;
    }

    .header a:hover{
        background-color:#9d940e
    }

    .cnt1{
        display: flex;
        background-color:#127D0B;
        padding: 8px 50px 8px 50px;
    }
    .items{
        display: flex;
        flex-direction: row;
        padding: 8px 8px 0px 8px;
    }

    .items a{
        background-color: #1105dc;
        color: white;
        padding:12px;
        margin: 8px;
        text-align: center;
        width: auto;
        border-radius: 12px;
        font-size: 16px;
        text-decoration:none;
    }

    .items img{
        background-color: white;
        margin: 8px;
    }
</style>

<div class="header">
    <a href="/"> <b> Pot.Io </b></a>
    <a href="/shop"> <b> Shop </b></a>
    <a href="/shop"> <b> Help </b></a>
</div>

<div class="cnt1">
    {#each items as item}
        <div class="item">
            <h1>{item.name}</h1>
        </div> 
    {/each}
</div>

额外注意 #

• 修复了样式中.items a里的拼写错误：mrgin改为margin
• 给class属性添加了引号（虽然Svelte允许无引号，但添加引号是更规范的HTML写法）

内容的提问来源于stack exchange，提问作者Bertrand Aurey Justinian