Vue 3 中使用 TypeScript 和 Composition API

-使用纯 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 }
})