首页 前端知识 Vue 3 中使用 TypeScript 和 Composition API

Vue 3 中使用 TypeScript 和 Composition API

2024-10-29 11:10:18 前端知识 前端哥 380 937 我要收藏

-使用纯 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 }
})
转载请注明出处或者链接地址:https://www.qianduange.cn//article/19417.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!