typescript - 如何使用 Typescript 在 Vue 3.0 setup() 函数中使用 async/await

Question

(这个问题已经回答了 JavaScript，见下文，但这个问题是特定于 TypeScript 的，它的行为不同)
我正在尝试使用 typescript 在 Vue3.0 中使用异步功能。
没有 异步 这段代码很好用:

// file: components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  async setup() { // <-- this works without 'async'
    const test = 'test'

    // await doSomethingAsynchronous()

    return {
      test,
    }
  },
})
</script>

与 async setup()组件“HelloWorld”从页面中消失，Firefox 控制台告诉我

"Uncaught (in promise) TypeError: node is null (runtime-dom.esm-bundler.js)"

当我更改 async setup()至 setup() ，代码有效，
但是我将无法在设置函数中使用 async/await 。
所以我的问题:
如何使用 Typescript 在 setup() 函数中使用 async/await？
编辑:
这个问题的答案: why i got blank when use async setup() in Vue3显示 async setup()确实适用于 JavaScript，所以我希望它也适用于 TypeScript。

Answer 1

尝试使用 onMounted操作异步调用的钩子(Hook):

 setup() {
    const users = ref([]);
    onMounted(async () => {
      const res = await axios.get("https://jsonplaceholder.typicode.com/users");
      users.value = res.data;
      console.log(res);
    });

    return {
      users,
    };
  },

LIVE DEMO
但是 最佳方法是使用 async setup在子组件中并用 Suspense 包装该组件父组件中的组件:
用户列表.vue

<script  lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
    async setup() {
        //get users from jsonplacerholder using await fetch api 
        const users = await fetch("https://jsonplaceholder.typicode.com/users").then(res => res.json());

        return {
            users
        }
    }
})
</script>
<template>
    <div>
        <!-- list users -->
        <ul>
            <li v-for="user in users">{{ user.name }}</li>
        </ul>
    </div>
</template>

父组件 :

<script lang="ts">

import UserList from "../components/tmp/UserList.vue";
...
</script>

   <div>
            <!-- Suspense component  to show users  -->
            <Suspense>
                <template #fallback>
                    <div>loading</div>
                </template>

                <UserList />
            </Suspense>
        </div>