vue3.0+TS使用

ts+ref

//定义简单数据类型
//需要注意，指定了一个泛型参数但没有给出初始值，那么最后得到的就将是一个包含 undefined 的联合类型：
// 推导得到的类型：Ref<boolean | undefined>
const show = ref<boolean>(false);
或者
const show：Ref<string> = ref(false);
//简单数据类型赋值
const handleShow = ():void=>{
    show.value = true
}
//---------------------------------------------------------------------------------------
//定义复杂数据类型
interface ArrListType {
    name:string
    age:number
    des:string
}
type ObjListType = partial<ArrListType>

const arrList = ref<ArrListType[]>([])
const objData = ref<ObjListType>({})
//复杂数据类型赋值
const handleArr = ()=>{
    //mock数据
    const res = [{name:'x',age:10,des:'x'},{name:'y',age:11,des:'y'}]
    arrList.value = res
}
const handleObj = ()=>{
    //mock数据
    const res = {name:'x',age:10,des:'x'}
    arrList.value = res
}

ts+reactive

type menuListType={
    menuId:number;
    meuName:syring
}
interface dataType {
    menuList:menuListType[]
    userInfo:userInfoType[]
}
//如果使用reactive，建议使用下面的深层数据类型，我们在点的时候不会破坏reactive的proxy代理
const data =reactive<dataType>({
    menuList:[],
    userInfo:[]
})
或者
//不推荐使用 reactive() 的泛型参数，因为处理了深层次 ref 解包的返回值与泛型参数的类型不同。推荐下方的显式标注类型
const data:dataType =reactive({
    menuList:[],
    userInfo:[]
})
//处理数据
const handleData = ()=>{
    //mock数据
    const res = [{menuId:111,meuName:'haha'}]
    data.menuList = res
}
//---------------------------------------------------------------------------------------
//对于浅层的数据类型，我们并不推荐使用reactive，ref更适合，下方仅做了解
interface dataType {
    menuId:number,
    menuName:string
}
const data = reactive<dataType[]>([])
//处理数据
const handleData = ()=>{
    //mock数据
    const res = [{menuId:111,meuName:'haha'}]
    //这里赋值不能直接=赋值，否则会破坏proxy代理，所以需要解构push进去
    dataType.push(...res)
}
//因为是push进去的，难免会因为重复请求，而造成数据重复，这个时候在适当的时候置空数据，同样不能使用=[]进行置空，而是：
dataType.slice(0)

获取组件 ref 实例+ts

使用 vue3 和 ts 时，为了获取 组件 ref 实例，就需要在 ref 函数的泛型中指定类型。如何获取组件的类型呢？vue 官方文档中 TypeScript 支持里已经告诉我们了一个获取组件类型的方法，InstanceType<typeof 组件名称>，使用方式如下：

//为了获取组件的类型，我们首先需要通过 typeof 得到其类型，再使用 TypeScript 内置的 InstanceType 工具类型来获取其实例类型：
const $userForm = ref<InstanceType<typeof userForm>|null>(null);

ref实例+ts

//子组件
<NewsDialog ref="news" @refreshData="getList()"></NewsDialog>
//导入子组件
import NewsDialog from './components/NewsDialog.vue'
//获取子组件实例
const news = ref<InstanceType<typeof NewsDialog>>()            
//打开消息弹窗
const openNewsDialog = (): void => {
  news.value?.showDialog()
}

//子组件暴露方法
defineExpose({
  showDialog,
});

处理原生 DOM 事件时 + ts

//input标签 
<input
  type="text"
  class="search"
  ref="input"
  v-model="inputValue"
  placeholder="队伍名称最多6个字"
  maxlength="6"
/>
 
const input = ref<HTMLElement | null>(null); 
//获取焦点
(input.value as HTMLInputElement).focus();

ts结合prop使用（父传子）

注意：传递给

defineProps

的泛型参数本身不能是一个导入的类型：

//vue3+js的写法
const props = defineProps({
    id:{
        type:Number,
        default:0
    }
    arr{
        type:Array
        default:()=>[]
    }
})
//vue3+ts写法
interface PropType = {
    id:number
    arr:string[]
}
const props = defineProps<PropType>()
//props 声明默认值 通过 withDefaults 编译器宏解决  推荐
const props = withDefaults(defineProps<PropType>(), {
  id: 1,
  arr: () => ['one', 'two']
})
//下面的默认值写法暂时还处在实验性阶段，了解为主
const { id, arr=[] } = defineProps<PropType>()

ts结合emit使用（子传父）

//vue3+js的写法
const emits = defineEmits(['change', 'update'])
//vue3+ts写法
const emits = defineEmits<{
    (e:'change'):void,
    (e:'update',value:string):void
}>()

ts+computed

computed()

会自动从其计算函数的返回值上推导出类型：

const count = ref(0)
// 推导得到的类型：ComputedRef<number>
const double = computed(() => count.value * 2)
// => TS Error: Property 'split' does not exist on type 'number'
const result = double.value.split('')

//当然，也可以通过泛型参数显式指定类型：
const double = computed<number>(() => {
  // 若返回值不是 number 类型则会报错
})

provide / inject + ts

import { provide, inject } from 'vue'
import type { InjectionKey } from 'vue'
//建议将key抽出去，方便复用
const key = Symbol() as InjectionKey<string>

provide(key, 'foo') // 若提供的是非字符串值会导致错误

const foo = inject(key) // foo 的类型：string | undefined

ts+pinia

在pinia里已经去掉了mutation

首先要安装全局依赖npm i pinia

//封装使用的pinia   在store/index.ts里
//导入defineStore
import { defineStore } from 'pinia'
//导入接口
import { getBoxConfigApi } from '@/api/GuardBox'
//定义数据接口
export interface giftInfoType {
  use_gift_id: number
  count: number
  level: number
  gift: {
    id: number
    name: string
  }
}
//定义数据接口
interface AllConfigType {
  all_config: Partial<{
    title_img: string
    date_range: string[]
    year_select: string[]
    ttl: string
    constellation: string
    user_level: string
  }>
  gift_info: giftInfoType[]
}
//使用pinia
export const useStore = defineStore('main', {
  state: (): AllConfigType => ({
    all_config: {},
    gift_info: [],
  }),
  actions: {
    async getConfig(level = 1) {
      const { data } = await getBoxConfigApi({ level })
      this.all_config = data.all_config
      this.gift_info = data.gift_info
      return data
    },
  },
})

//引用pinia  在homePage.vue里
<script setup lang="ts">
import { useStore } from '@/store'
const store = useStore()
// 礼物配置信息
const giftConfigInfo = ref<giftInfoType[]>([])
// 获取礼物信息
const getGiftInfo = async (): Promise<void> => {
  const { gift_info } = await store.getConfig(activeIndex.value)
  giftConfigInfo.value = gift_info
}
getGiftInfo()
</script>

ts定义异步空返回值函数

const getList = async (): Promise<void> => {
    const {data} = await getListApi();
    ...
}