VUE+TS项目搭建

一，Vue+TS构建

npm create vite@latest my-vue-app -- --template vue-ts 
//1.npm create vite@latest 基于最新版本vite进行项目创建  
//2.my-vue-app 项目名称
//3.-- --template vue-ts  选择vue+ts进行开发

vue的两个插件
1.Volar：对vue文件进行实时的类型错误反馈
2.TypeScript Vue Plugin 用于支持在TS中使用import * vue文件

二，ref标注类型

既可以在给ref对象的value赋值时校验数据类型，同时在使用value的时候获得代码提示

const year  = ref<string | number>(2080) //初始值
year.value = '2029'

案列

image.png

三、为reactive标注类型

为reactive标注类型之后，既可以在响应式对象在修改属性的时候约束类型，也可以在使用获得代码提示。

type form ={
username:string,
password:string,
isagree?:boolean //这样的写法可以有属性也可以没有
}

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 = '北京'

四、为计算属性进行类型标注

将下述图片中商品大于500的筛选出来

type Item = {
id:string,
name:string,
price:number
}

const list = ref <Item[]>
//得出一个新数组
const filterList = computed(()=>list.value.filter(item=>item.price>500));

五,事件处理函数标注类型

原生的DOM事件处理函数默认会自动标注为any类型,为了获得更好的代码提示,需要手动标注类型。

为事件函数标注类型

给事件对象e 标注为Event类型,可以获得事件对象的相关提示
需要更加精确的DOM类型提示可以使用断言as进行操作

六、为模板引用标注类型

image.png

七,对象的非空值处理

当对象的属性可能是null和undefined的时候,称之为"空值",尝试访问空值身上的属性或方法时可能会出现错误。
?.,可选链的值为undefined或null时,会停止运行
或者使用条件判断
非空断言! 开发者明确知道当前值一定不是空值

八、为组件的props标注类型

父传子
确保给组件传递的prop类型是安全的

image.png

组件内部使用props和组件传递prop属性有代码提示。
使用defineProps宏函数对组件props进行类型标注

image.png

props默认值的设置
外面嵌套一个withDefaults，一般设置为可选的上面

image.png

//定义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标注类型

子传父
可以约束事件名称并给提示,同时约束传参类型,不会发生错误
通过defineEmits宏函数进行类型标注
需求:子组件触发一个get-msg的事件,并传递一个string类型的参数

1.通过type定义事件类型

type Emits = {(e:'get-msg',msg:string):void

}

2.给泛型参数传参

const emit = defineEmits<Emits>()

触发

emit('get-msg','i am a son compoment')

image.png

十、类型声明文件

在TS中以d.ts为后缀的文件就是类型声明文件,主要作用为js模块提供类型信息支持

十一，js ->TS的思想

image.png

定义axios的request方法通过泛型指定
axios.request<后端接口定义的数据类型>

后端根据接口文档返回的数据格式是这样的

image.png

type channelsItem = {
    id:BigInteger,
    name:string
  }

  type res = {
    data:{
      channel:channelsItem[]
    },
    message:string
  }

使用的时候传到对应的泛型中

image.png

三,action异步

image.png