14 【TS类型声明 keepAlive】

25.Ts 类型声明使用 & 讲解

该文章未归纳完，那么多API肯定也说不完。。不过也涵盖了主要的组合式 API 的 TS类型。

核心：大部分都是运用API函数泛型来定义类型。

25.1 父组件相关的

<template>
  <el-button @click="onsub">测试</el-button>
  <input type="text" @change="handleChange" />
  <child ref='childRef' :child='2' :strData='"1"' :arrFor="[]" @elPsyKongroo='onsub'></child>
</template>
<script lang='ts' setup>
import child from './child.vue'
import { ref,Ref,reactive,computed,customRef,watch,provide } from "vue";
 
//> ref
// interface Ref<T> {
//   value: T
// }
// function ref<T>(value: T): Ref<T>
const year = ref<string | number>('2020')
// 如果泛型的类型未知，则建议将 ref 转换为 Ref<T>：
function useState<State extends string>(initial: State) {
  const state = ref(initial) as Ref<State> // state.value -> State extends string
  return state
}
 
//> reactive
interface Book {
  title: string
  year?: number
}
const book = reactive<Book>({title:'唉，真有氏的怀表怎么停了!'})
// function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
 
//> customRef
// function customRef<T>(factory: CustomRefFactory<T>): Ref<T>
// type CustomRefFactory<T> = (
//   track: () => void,
//   trigger: () => void
// ) => {
//   get: () => T
//   set: (value: T) => void
// }
function useDebouncedRef(value:string, delay = 200) {
  return customRef<string>((track, trigger) => {
    return {
      get() {
        return value
      },
      set(newValue) {
        value = newValue
      }
    }
  })
}
let a23 = useDebouncedRef('heelo1')
a23.value = '123'
 
 
//> provide 与 inject   // inject示例在同级child.vue里
// interface InjectionKey<T> extends Symbol {}
// function provide<T>(key: InjectionKey<T> | string, value: T): void
provide('static',year)
provide('pbook',book)
provide('changeFn',onsub)
//! 有时候可能需要在子组件修改响应式的数据，此时provide一个方法给子组件调用
 
 
 
//> computed
let count = ref(0)
const doubleCount = computed<number>(() => count.value + 2)
 
//> watch
watch<number>(count,()=>{})
// watch<Ref<number>>(count,()=>{}) // 也可以
interface ReactiveData2{
  content2: {
    count2: number
  }
}
let refData = ref(1)
let reactiveData = reactive({content:{count:110}})
let reactiveData2 = reactive<ReactiveData2>({content2:{count2:1}})
watch<[Ref<number>,() => number,ReactiveData2]>([refData, ()=>reactiveData.content.count,reactiveData2], ([a,b,c], oldValue) => {
  console.log(a,b,c, oldValue)
})
 
 
// defineExpose 暴露的内容
// let childRef = ref()
// setTimeout(() => {
//   console.log(childRef.value.ex1); // 如果是子组件的ref对象数据，会自动解包 .value
// }, 1000);
 
function handleChange(el) {
  console.log((el.target as HTMLInputElement).value)
  console.log(el.target.value)
}
function onsub(val) {
  console.log(val);
  year.value = 2036
  book.title = '掌管未来女神的作战计划 El psy kongroo'
}
</script>

25.2 子组件相关的

<