（四）定义 props 类型
# 一、定义 props 类型
- 第一种方式无法自动推断出类型
<script setup lang="ts">
defineProps(['id', 'title', 'price', 'isStock'])
</script>2. 使用 JavaScript 的方式定义（不推荐）
<script setup lang="ts">
defineProps({
title: {
type: String
}
})
</script>3. 使用 TypeScript 的方式定义
<script setup lang="ts">
// 使用 interface 定义
interface Product {
id: number,
title: string,
price: number,
isStock: boolean,
}
// 使用泛型定义
defineProps<Product>()
</script># 二、使用 withDefaults，给 props 定义默认值
<script setup lang="ts">
// 使用 interface 定义
interface Product {
id: number,
title: string,
price: number,
isStock: boolean,
}
// withDefaults 定义默认值
withDefaults(defineProps<Product>(), {
title: '默认标题',
price: 100,
isStock: true,
})
</script># 总结-写在最后
说明
vue 不支持使用外部导入进来的类型限制，比如通过 import 这种导入进来的不行，必须定义在内部
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年11月30日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
