开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

前言

想要在vue中更加得心应手的使用TypeScript的话，熟知相应的标注类型是必不可少的，当你对这些常用的标注类型已经很熟悉的时候，你就可以体会到在键盘上风驰电掣的感觉了。

组件props的标注类型

为props标注类型有两种方式：

运行时声明：通过 defineProps()宏函数对参数类型进行推导。

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

props.obj // string
props.num // number | undefined
</script>

因为是通过参数的形式传递给其props在运行时使用的，所以叫做“运行时声明”。

基于类型的声明：通过泛型参数定义props的类型，而这也是最直接有效的方式，强烈推荐。

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

这种方式编译出的props运行时选项和第一种是完全一致的。

有一点要注意的是，运行时声明和基于类型的声明是不能同时使用，只能择一使用，当然也没必要同时使用。

如果props的类型比较多，我们也可以把所有类型移入到一个单独的接口中：

<script setup lang="ts">
interface Props {
  obj: string
  num?: number
}

const props = defineProps<Props>()
</script>

注意：对于传递给defineProps的泛型参数不能是一个导入的类型。
import { Props } from './other-file'
// 错误
defineProps<Props>()

props的解构默认值

细心的你可能发现了，基于类型的声明怎么声明默认值呢？

很不幸的告诉你使用基于类型的声明，失去了声明默认值的能力。

但是,我们可以通过withDefaults编译器宏解决这个问题。这声明默认值的效果是一样，同时也可以提供类型检查。

export interface Props {
  title?: string
  articles?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  title: 'hello',
  articles: () => ['文章1', '文章2']
})

如果不是使用 <script setup>的模式，也想获得类型推导的能力，就要使用defineComponent()来解决了，这里就不做具体说明了，有兴趣的可参考官网文档或者百度了解。

Bye！！！

Vue中TypeScript的常用标注类型（一）组件的props

前言

组件props的标注类型

props的解构默认值