Vue 3 中使用 TypeScript 定义 Props

在 Vue 3 中，我们可以通过defineComponent函数来创建一个组件，并且使用props选项来定义子组件的 props。

使用 TypeScript 可以给我们带来更好的类型检查和代码提示，下面我们就一起来看看在 Vue 3 中如何使用 TypeScript 定义 Props。

创建一个简单的 Props 组件

在开始之前，我们需要先确保我们使用了@vue/compiler-sfc编译器，以支持 TypeScript。

// main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

接下来我们可以创建一个简单的组件，并且为其定义几个 props。

<!-- App.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  }
})
</script>

我们定义了一个名为message的 props，其类型为String，并且我们将其标记为必传的。

使用 Props

当 props 定义好之后，父组件可以通过 props 将数据传递给子组件。

<!-- Parent.vue -->
<template>
  <Child message="Hello World" />
</template>

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

export default defineComponent({
  components: {
    Child
  }
})
</script>

现在，在子组件中可以使用props对象，访问传递过来的属性：

<!-- Child.vue -->
<template>
  <div>{{ message }}</div>
</template>

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

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  }
})
</script>

类型检查

Vue 3 支持使用 TypeScript 定义 props 的类型，在我们的上面的例子中，我们在props对象中为 message 属性定义了String类型。即使我们不使用 TypeScript，Vue 3 也会提示我们如果我们传递的 props 不满足要求的话。但是使用 TypeScript 能够使我们在编译时能够发现更多类型错误，而不是在运行时才发现。

<!-- Parent.vue -->
<template>
  <Child />
</template>

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

export default defineComponent({
  components: {
    Child
  }
})
</script>

现在，我们从父组件中删除了 message 属性，就会在编译时收到以下错误：

TS2345: Argument of type '{ components: { Child: typeof Child }; }' is not assignable to parameter of type 'ComponentOptionsBase<Vue, {}, {}, {}, {}, {}, {}, {}>'.
      Object literal may only specify known properties, and 'components' does not exist in type 'ComponentOptionsBase<Vue, {}, {}, {}, {}, {}, {}, {}>'.

这表示我们已删除所需的message属性，并且该属性已被标记为必须。当我们使用 TypeScript 作为类型检查器时，我们会在编译时获得编译错误，以便我们可以在运行时之前进行修复。

带有类型的 Props

我们还可以使用 TypeScript 接口定义 props 的类型，以便在整个程序中重复使用。

// Child.ts
import { defineComponent } from 'vue'

interface ChildProps {
  message: string
}

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  }
})

在上面的例子中，我们定义了一个名为 ChildProps 的接口，该接口定义了要传递给子组件的 props 的类型。这使我们可以在整个程序中重复使用，并在整个程序中保持一致的类型。然后我们将接口传递给子组件：

// Parent.vue
import { defineComponent } from 'vue'
import Child, { ChildProps } from './Child.vue'

export default defineComponent({
  components: { Child },
  setup() {
    const props: ChildProps = {
      message: 'Hello World'
    }
    return { props }
  }
})

现在，我们可以在 setup 函数中显式声明 props 的类型。这会使 TypeScript 能够自动推断 props 对象。

结论

在 Vue 3 中，我们可以使用 TypeScript 定义组件的 props，以获得更好的类型检查和代码提示。

在定义 props 的过程中，使用props选项来定义 child component 的 props，使用接口来定义带有类型的 prop，使得在整个程序上 下文中保持一致的类型。