一湿滓，Vue+TS構(gòu)建
npm create vite@latest my-vue-app -- --template vue-ts
//1.npm create vite@latest 基于最新版本vite進(jìn)行項(xiàng)目創(chuàng)建
//2.my-vue-app 項(xiàng)目名稱
//3.-- --template vue-ts 選擇vue+ts進(jìn)行開發(fā)
vue的兩個(gè)插件
1.Volar：對(duì)vue文件進(jìn)行實(shí)時(shí)的類型錯(cuò)誤反饋
2.TypeScript Vue Plugin 用于支持在TS中使用import * vue文件
二柳弄，ref標(biāo)注類型
既可以在給ref對(duì)象的value賦值時(shí)校驗(yàn)數(shù)據(jù)類型，同時(shí)在使用value的時(shí)候獲得代碼提示
const year = ref<string | number>(2080) //初始值
year.value = '2029'
案列
三上渴、為reactive標(biāo)注類型
為reactive標(biāo)注類型之后蝉稳，既可以在響應(yīng)式 對(duì)象在修改屬性的時(shí)候約束類型破婆，也可以在使用獲得代碼提示啄巧。
type form ={
username:string,
password:string,
isagree?:boolean //這樣的寫法可以有屬性也可以沒(méi)有
}
const form1:form = reactive({
username:' ',
password:' ',
isagree:true
})
type form = {
username: string,
address: string,
phone: string,
gender?: string
}
const form1: form = reactive({
username: ' ',
address: '',
phone: '',
})
form1.address = '北京'
四寻歧、為計(jì)算屬性進(jìn)行類型標(biāo)注
將下述圖片中商品大于500的篩選出來(lái)
type Item = {
id:string,
name:string,
price:number
}
const list = ref <Item[]>
//得出一個(gè)新數(shù)組
const filterList = computed(()=>list.value.filter(item=>item.price>500));
五,事件處理函數(shù)標(biāo)注類型
原生的DOM事件處理函數(shù)默認(rèn)會(huì)自動(dòng)標(biāo)注為any類型,為了獲得更好的代碼提示,需要手動(dòng)標(biāo)注類型。
為事件函數(shù)標(biāo)注類型
- 給事件對(duì)象e 標(biāo)注為Event類型,可以獲得事件對(duì)象的相關(guān)提示
- 需要更加精確的DOM類型提示可以使用斷言as進(jìn)行操作
六秩仆、為模板引用標(biāo)注類型
七,對(duì)象的非空值處理
當(dāng)對(duì)象的屬性可能是null和undefined的時(shí)候,稱之為"空值",嘗試訪問(wèn)空值身上的屬性或方法時(shí)可能會(huì)出現(xiàn)錯(cuò)誤码泛。
?.,可選鏈的值為undefined或null時(shí),會(huì)停止運(yùn)行
或者使用條件判斷
非空斷言! 開發(fā)者明確知道當(dāng)前值一定不是空值
八、為組件的props標(biāo)注類型
父?jìng)髯?/strong>
確保給組件傳遞的prop類型是安全的
組件內(nèi)部使用props和組件傳遞prop屬性有代碼提示澄耍。
使用defineProps宏函數(shù)對(duì)組件props進(jìn)行類型標(biāo)注
props默認(rèn)值的設(shè)置
外面嵌套一個(gè)withDefaults噪珊，一般設(shè)置為可選的上面
//定義props類型
type BtnType='sucess'|'warning'|'defeat'
type Props = {
color: string,
size?: string,
btntype:BtnType
}
//2.defineProps<props>
const props = withDefaults(defineProps<Props>(), {
btntype:'sucess'
})
九、給組件emits標(biāo)注類型
子傳父
可以約束事件名稱并給提示,同時(shí)約束傳參類型,不會(huì)發(fā)生錯(cuò)誤
通過(guò)defineEmits宏函數(shù)進(jìn)行類型標(biāo)注
需求:子組件觸發(fā)一個(gè)get-msg的事件,并傳遞一個(gè)string類型的參數(shù)
1.通過(guò)type定義事件類型
type Emits = {(e:'get-msg',msg:string):void
}
2.給泛型參數(shù)傳參
const emit = defineEmits<Emits>()
觸發(fā)
emit('get-msg','i am a son compoment')
十齐莲、類型聲明文件
在TS中以d.ts為后綴的文件就是類型聲明文件,主要作用為js模塊提供類型信息支持
十一卿城，js ->TS的思想
定義axios的request方法通過(guò)泛型指定
axios.request<后端接口定義的數(shù)據(jù)類型>
后端根據(jù)接口文檔返回的數(shù)據(jù)格式是這樣的
type channelsItem = {
id:BigInteger,
name:string
}
type res = {
data:{
channel:channelsItem[]
},
message:string
}
使用的時(shí)候傳到對(duì)應(yīng)的泛型中
三,action異步
