-使用纯 TypeScript 声明 props 和抛出事件
<script setup lang="ts">
import { ref } from 'vue'
defineProps<{ msg: string }>()
const count = ref(0)
</script>
- 在 ts 中使用 props中的属性,具有很好的类型推断能力,ts写法没有定义默认值时,我们用vue3提供的withDefaults给props提供默认值。
<script setup lang="ts">
interface Person {
name: string
age: number
}
interface Props {
msg: string
title?: string
list: Person[]
}
// withDefaults 的第二个参数便是默认参数设置,会被编译为运行时 props 的 default 选项
const props = withDefaults(defineProps<Props>(), {
title: '个人信息',
list: () => []
})
console.log(props.list[0].age)
</script>
- Composition api类型约束
import { ref, reactive, computed } from 'vue'
interface User = {
name: string
age: number
}
const str = ref<string>('')
const user = ref<User>({ name: 'yang',age:18 })
const user1 = reactive<User>({ name: 'chen',age:18 })
const com1 = computed(() => str.value)
const com2 = computed<User>(()=<{
return { name: 'okk',age: 20 }
})