第一卷今天学了 ts+vue3 项目

最新推荐文章于 2025-03-11 22:17:28 发布

原创最新推荐文章于 2025-03-11 22:17:28 发布 · 521 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #javascript #前端

博客主要围绕TypeScript在前端开发中的应用。提到defineComponent能在TypeScript下给予组件正确的参数类型推断，还介绍了PropType、节点的contains方法，强调传参时要传递响应式的ref对象，以及使用ts自定义类型更省事。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.defineComponent最重要的是：在TypeScript下，给予了组件 正确的参数类型推断

2.PropType

场景：

list:{
            //这里特别有一点，我们现在的 Array 是没有类型的，只是一个数组，我们希望它是一个 ColomnProps 的数组，
            //那么我们是否可以使用了类型断言直接写成 ColomnProps[]，显然是不行的 ，
            //因为 Array 是一个数组的构造函数不是类型，我们可以使用 PropType 这个方法，它接受一个泛型，
            //讲 Array 构造函数返回传入的泛型类型
            //这里直接把Array断言成ColumnProps[]类型是不行的 因为Array是一个构造函数不是一个类型
            //我们需要引入PropType 她接收一个泛型 将Array的构造函数返回传入的泛型类型
            type:Array as PropType<ColumnProps[]>,
            required:true,
        }

3.与js不同的是拿元素要则有

   //当初始化的时候是null 当上面挂载了因为ref它才有了值 有了个什么类型的值呢？HTMLElement类型 
   //使用泛型
   const dropdownRef = ref<null | HTMLElement>(null)

4.节点的contains方法

//是否点击了内部dropdownRef.value.contains(e.target as HTMLElement)
if(!dropdownRef.value.contains(e.target as HTMLElement) && isOpen.value){

节点的方法检测点击的地方是否包含在调用方法的节点中在这里e.target 挂在了doc上是doc的点击事件

5.在传参数的时候要传递一个响应式的ref对象可以先看isclickoutside就是个响应式的对象所以我们传进函数的对象也让他变成这样的

6.ts的自定义类型这样省事点

//优化 扩展类型 父组件直接:RulesProp就好了 不用:RuleProp[]
export type RulesProp = RuleProp[]

export default defineComponent({
    props: {      //注意断言这里
    rules: Array as PropType<RulesProp>,
    modelValue: String
},