上海企业网站建设电话,如何做网站的埋点,网站怎么优化关键词快速提升排名,做视频网站了几百万最近学习vue3 typescript#xff0c;网上看了很多文章#xff0c;汇总一下#xff0c;分享给大家#xff0c;希望会对大家有帮助。 一. 为props标注类型 defineProps()宏函数支持从它的参数中推导类型#xff1a;
script setup langtsimport { defineProps } fro… 最近学习vue3 typescript网上看了很多文章汇总一下分享给大家希望会对大家有帮助。 一. 为props标注类型 defineProps()宏函数支持从它的参数中推导类型
script setup langtsimport { defineProps } from vue//运行时声明const propsdefineProps({foo:{ type:String,required:true },bar: {type:Number}})//stringconst foo:stringprops.foo// number | undefunedconst bar:number|undefinedprops.bar/script
这被称为运行时声明传递给defineProps的参数作为运行时的props选项使用推断出类型。
第二种方式通过泛型参数来定义props的类型这种方式更加直接
script setup langts
import { defineProps } from vueconst propsdefineProps{foo:string,bar?:number
}();//orinterface Props {foo:stringbar?:number
}const props2definePropsProps()//string
const foo:stringprops2.foo;
//number | undefined
const bar:number|undefinedprops2.bar
/script
这种被称为“基于类型声明”编译器会尽可能的尝试根据类型参数推导出等价的运行时选项。这种方式不足之处在于失去了定义props默认值的能力。为了解决这个问题我们可以使用withDefaults编译器宏
script setup langts
import { defineProps } from vueinterface Props {msg:stringlabels:string[]
}const propswithDefaults(definedPropsProps(), {msg:zhangsan,labels:[a,b]}/script上面代码会被编译为等价的运行时props的default选项。
二. 为emits标注类型 emit函数的类型标注也可以使用运行时声明或基于类型的声明
script setup langts
import { defineEmits } from vue//运行时
const emitsdefineEmits({changeEmit,updateEmit})emits(changeEmit,5,data)//基于类型
const emitsdefineEmits{
(e:changeEmit,id:number,data:string):void
(e:updateEmit,value:string):void
}();/script
我们可以看到基于类型声明可以使我们对所触发的事件的类型进行更细粒度的控制。
三. 为ref()标注类型
默认推倒类型
ref会根据初始化时的值自动推导其类型
script setup langts
import { ref } from vueconst yearref(2023)//TS Error:不能将类型sting分配给类型
//number
year.value2023/script
通过接口指定类型:
script setup langts
import { ref } from vue
import type { Ref } from vueconst year:Refstring|numberref(2023)
//success
year.value2023//or 通过泛型指定类型
const year1refstring|numberref(2023)
//success
year1.value2023//未指定初始值
const year2refstring|number|undefined()
//success
year2.value2023
year2.value2023
/script
注意如果你指定了一个泛型参数但没有给出初始值那么最后得到的就是一个包含undefined的联合类型。
四. 为reactive标准类型
默认推导类型
reactive也会隐式的从它的参数中推导出类型
script setup langts
import { reactive } from vuecost tempreactive({title:为vue3做标注
})//error number
temp.title2023
//success string
temp.tilteabc
/script
通过接口指定类型
要显式的指定一个reactive变量的类型我们可以使用接口
script setup langts
import { reactive } from vueinterface Book {tilte:stringyear?:number
}const book:Bookreactive({title:程序员的自我修养})
//or
// const bookreactiveBook({title:程序员的自我修养})
//sucess
book.year2023/script
五. 为computed()标注类型
默认推导类型
computed()会自动从其计算函数的返回值上推导类型
script setup langts
import { ref,computed } from vueconst countref(0)//推导得到类型ComputedRefnumber
const doublecomputed(() count.value * 2)//TS Error:Property split does not exist on type
//number
const resultdouble.value.split()/script
通过泛型指定类型
你还可以通过泛型参数显式指定类型
script setup langts
import { ref,computed } from vue
import type { Ref } from vueconst count:Refstingref(0)const doublecomputednumber(() count.value * 2 )/script
六为事件处理函数标注类型
在处理原生DOM事件时应该给时间处理函数的参数正确地标注类型
script setup langtsfunction handleChange(event) {//event 隐性的标注为 any 类型console.log(event.target.value)
}/scripttemplateinput typetext changehandleChange/
/template
当没有类型标注时这个event参数会隐性的标注为any类型。这也会在tsconfig.json中配置了“strict”:true 或 noImplicitAny:true时报出一个ts错误。因此建议显示的为事件处理函数的参数标注类型。此外你可能需要显式的强制转换event上的属性
script setup langtsfunction handleChange(event:Event):void
{console.log((event.target as HTMLInputElement).value)
}/scripttemplateinput typetext changehandleChange/
/template七为provide/inject标注类型
provide和inject 通常会在不同的组件中运行。要正确的为注入的值标注类型Vue提供了一个InjectKey类型它是一个继承自Symbol的泛型类型可以用来在提供者和消费者之间同步植入值的类型。
script setup langts
import { provide,inject } from vue
import type { InjectionKey } from vueconst keySymbol as InjectionKeystring//若提供的是非字符串值会导致错误
provide(key,foo)//foo的类型string | undefind
const fooinject(key)/script
建议将注入的key的类型保存在一个单独的文件中这样它就可以被多个组件导入。
当使用字符串注入key时注入值的类型是unkown需要通过泛型参数显式的声明
script setup langts
import { inject } from vue//foo的类型string | undefined
const fooinjectstring(key)/script
注意注入的值仍然可以是undefined因为无法保证提供者一定会在运行时提供provide这个值。当提供了一个默认值后这个undefined的类型就可以被移除。
script setup langts
import { inject } from vue//类型 string
const fooinjectstring(key,foo)/script
如果你确定该值始终被提供则可以强制转化该值。
script setup langts
import { inject } from vueconst fooinject(key) as string/script
八. 为组件模板引用标注类型 有时我们需要为一个子组件添加一个模板ref以便调用它公开的方法。比如我们有一个MyComponent子组件它有一个打开的模态框的方法
script setup langts
import {ref,defineExpose} from vueconst isContentShownref(0)
const open() isContentShown.valuetruedefineExpose({open
})/script
为了获取MyComponent的类型我们首先需要通过typeof得到其类型再使用TypeScript内置的InstanceType工具类型来获取其实例类型。
//pranet.vue
script setup langts
import MyComponent from ./MyComponent.vueconst modalrefInstanceTypetypeof MyComponent | null(null)const openModal() modal.value?.open()
/script
