Moeyua

四畳半のへや


  • 首页
  • 归档
  • 分类
  • 关于
  • 链接
  •    

© 2023 Moeyua

Theme Typography by Makito

Proudly published with Hexo

使用 TypeScript 为 Vue 组件的 prop 标注类型

发布于 2022-06-02 # 技术文档 

在选项式 API 或者不使用 <script setup> 时我们可以使用 PropType 这个工具类型来标记更复杂的 prop 类型:

import { defineComponent } from 'vue'
// 引入 Proptype
import type { PropType } from 'vue'

interface Book {
  title: string
  author: string
  year: number
}

export default defineComponent({
  props: {
    book: {
      // 提供相对 `Object` 更确定的类型
      type: Object as PropType<Book>,
      required: true
    },
    // 也可以标记函数
    callback: Function as PropType<(id: number) => void>,
    itemList: {
      // 定义数组类型
      type: Array as PropType<Array<SingleItem>>,
      required: false,
    },
  },
})

如果不使用 PropType 而直接对类型进行断言:

itemList: {
      // 项目列表
      type: Array as Array<SingleItem>,
      required: false,
    },

会得到 类型 "ArrayConstructor" 到类型 "SingleItem[]" 的转换可能是错误的,因为两种类型不能充分重叠。如果这是有意的,请先将表达式转换为 "unknown"。 这样的错误。

当使用 <script setup> 时,我们直接通过泛型参数来定义 prop 的类型:

<script setup lang="ts">
const props = defineProps<{
  foo: string
  bar?: number
}>()
</script>

defineProps() 宏函数支持从它的参数中推导类型,所以我们也可以在它的参数中定义:

<script setup lang="ts">
const props = defineProps({
  foo: { type: String, required: true },
  bar: Number
})

props.foo // string
props.bar // number | undefined
</script>

分享到 

 上一篇: 使用 Homebrew 安装 Typora 的 0.11.18 版本 下一篇: 【译文】Grid 用于布局, Flexbox 用于组件 

© 2023 Moeyua

Theme Typography by Makito

Proudly published with Hexo