在Svelte+TypeScript中使用Promise后访问属性报错，该如何解决？

初始时metrics变量仅声明了类型但未赋值，默认值为undefined。Svelte的{#await}语法规则是：如果传入的表达式不是Promise，会直接进入{:then}分支，将表达式的值（也就是undefined）作为foo传入，此时访问foo.Count自然会抛出“无法在undefined上访问Count”的错误。

直到onMount执行后，metrics才被赋值为真正的Promise，组件重新渲染才会正确走pending→then的流程，但初始渲染时的错误已经产生。

有两种简单的修复方式：

方式一：给metrics初始化为一个空的pending Promise #

修改变量声明：

let metrics: Promise<Metrics> = new Promise(() => {});

这样初始时metrics就是一个Promise，{#await}会先显示等待状态，直到onMount里的Promise替换它并resolve，不会触发初始的undefined错误。

方式二：添加条件判断，仅当metrics存在时才执行{#await} #

修改模板部分：

<main>
  {#if metrics}
    {#await metrics}
      <p>waiting for the promise to resolve...</p>
    {:then foo}
      {@debug foo}
      <p>The foo value is {foo}</p>
      <p>The count is {foo.Count}</p>
    {:catch error}
      <p>Something went wrong: {error.message}</p>
    {/await}
  {:else}
    <p>waiting for the promise to resolve...</p>
  {/if}
</main>

通过{#if metrics}确保只有当metrics被赋值为Promise后，才进入await逻辑，避免初始渲染时处理undefined。

注：你用JSON.stringify(foo)能正常输出是因为Promise resolve后，foo是正确的Metrics对象，此时第二次渲染不会报错，但初始渲染的错误日志依然会被记录。

内容的提问来源于stack exchange，提问作者Ask Bjørn Hansen