帮看一段关于ts类型的代码?

Question

https://nuxt.com/docs/guide/directory-structure/error

<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps({
  error: Object as () => NuxtError
})
</script>

<template>
  <div>
    <h1>{{ error.statusCode }}</h1>
    <NuxtLink to="/">Go back home</NuxtLink>
  </div>
</template>

上面这段代码如何理解？

1. error: Object as () => NuxtError 这个有点蒙，试着能理解，就是定义 error的类型是一个函数 ，该函数返回NuxtError 是这样吗？
2. 既然error是一个函数类型，为什么模板中是 直接访问 statusCode属性？而不是使用error()函数？
3. 试着写了一下提示error可能未定义
   

Answer 1

在 defineProps 如果是通过参数的方式来约束类型,对应的类型的位置是构造函数,像 String, Number 都是构造函数。这里 Object 是一个值,一个运行时存在的 Object 对象,通常应该是构造函数,在 js 中任务函数本质上都是对象,因此这里的断言是没有问题的。所以这里的 error 是 NuxtError 类型,而 Object as () => NuxtError 是一个构造函数,会在运行时进行检验的构造函数,而不是 error 的类型。

Answer 2

error: Object as () => NuxtError 定义 error 为 NuxtError 类型，但不是必需，所以可能为 undefined。

若要定义 error 不能为 undefined，可以改成这样：

// javascript
defineProps({ error: { type: () => NuxtError, required: true }})

// typescript
defineProps<{ error: NuxtError }>()

Answer 3

复杂类型的type声明可以这样子写，会推断出 NuxtError

https://vuejs.org/guide/typescript/options-api.html#typing-co...

However, the runtime props options only support using constructor functions as a prop's type - there is no way to specify complex types such as objects with nested properties or function call signatures.

To annotate complex props types, we can use the PropType utility type:

可以看看 PropType的定义：

export type PropType<T> = PropConstructor<T> | PropConstructor<T>[];
type PropConstructor<T = any> = {
    new (...args: any[]): T & {};
} | {
    (): T;  // 这里，() => NuxtError 匹配这个 
} | PropMethod<T>;

ps: 或者你直接看看defineProps的类型，也能看出来它怎么推断出error 为 NuxtError 类型的

Answer 4

1. 直接 as
   
2. 使用 PropType 包装
   
3. 增加 required