Use of 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)

Get component ref instance+ts

When using vue3 and ts, in order to get the component ref instance, you need to specify the type in the generic of the ref function. How to get the type of component? The TypeScript support in the vue official document has already told us a method to get the component type, InstanceType<typeof component name>, the usage is as follows:

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

ref instance+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,
});

+ ts when handling native DOM events

//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 is used in conjunction with prop (father to son)

definePropsNote: The generic parameter passed to cannot itself be an imported type:

//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 combined with emit (child to father)

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

ts+computed

computed()The type is automatically deduced from the return value of its evaluation function:

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 + pine

The mutation has been removed in pinia

First, install the global dependency 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 defines asynchronous empty return value function

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