Svelte模板中await块如何添加TypeScript类型注解？

针对你遇到的Svelte await块中对象类型被识别为unknown、导致TS报错的问题，提供以下几种可行方案：

• 给Promise函数显式标注返回类型
  这是最规范的做法，直接在<script lang="ts">块里给返回Promise的函数指定返回类型，TS会自动推断await块内对象的类型：

  <script lang="ts">
    // 定义目标类型
    type TargetType = { foo: string };
  
    // 给fetch函数标注返回Promise<TargetType>
    function fetchData(): Promise<TargetType> {
      return fetch('/api/data').then(res => res.json());
    }
  </script>
  
  <!-- 模板中直接使用，TS能正确推断my_object的类型 -->
  {#await fetchData() then my_object}
    <p>{my_object.foo}</p>
  {/await}
  

• 在script中预处理Promise并断言类型
  如果无法修改原函数的类型定义，可以在script里提前处理Promise，用类型断言指定结果类型，再在模板中使用这个预处理后的Promise：

  <script lang="ts">
    type TargetType = { foo: string };
    // 提前断言json结果的类型
    const dataPromise = fetch('/api/data').then(res => res.json() as TargetType);
  </script>
  
  {#await dataPromise then my_object}
    <p>{my_object.foo}</p>
  {/await}
  

• 模板内临时使用类型断言（应急方案）
  虽然模板不支持直接的类型注解语法，但可以通过括号包裹+as断言的方式临时指定类型，适合快速解决报错：

  <script lang="ts">
    type TargetType = { foo: string };
    function fetchData() {
      return fetch('/api/data').then(res => res.json());
    }
  </script>
  
  {#await fetchData() then my_object}
    <!-- 用as断言指定类型 -->
    <p>{(my_object as TargetType).foo}</p>
  {/await}
  

优先推荐前两种方案，代码可读性和类型安全性更高；第三种仅作为临时应急使用。

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