TS+vue3中的声明类型

先演示下 ref、reactive 和 computed 限制类型的写法，每个函数都可以使用默认的参数推导，也可以显式地通过泛型去限制。

const a = ref('') //根据输入参数推导字符串类型 Ref
const b = ref([]) //可以通过范型显示约束 Ref
const c: Ref = ref([]) //声明类型 Ref 
interface Todo {
  title: string
  done: boolean
}
let todos: Ref = ref([{ title: 'Vue', done: false }])
// todos: Ref

interface ty {
  name: string
  price: number
}
const obj = reactive({})  //obj: {}
const course = reactive({ name: 'wz', price: 129 })  //范型显示约束
// course: {name: string;  price: number;}

const msg2 = computed(() => '') // 默认参数推导 msg2: ComputedRef
const course2 = computed(() => {
  // course2: ComputedRef
  return { name: 'wz', price: 129 }
})

在 Vue 中，除了组件内部数据的类型限制，还可以对 defineProps 和 defineEmits 声明参数类型

const props = defineProps<{
  title: string
  value?: number
}>()
const emit = defineEmits<{ 
  (e: 'update', value: number): void
}>()

或as断言类型
import { PropType } from 'vue'
defineProps({
  msg: String,
  title: Array as PropType
})

withDefaults 用于defineProps绑定默认值的api

defineProps 只能是要么使用运行时声明，要么使用typescript类型声明。同时使用两种声明方式会导致编译报错。
defineProps、withDefaults 是只在

也可以利用TS特性，单独使用defineProps ，只能设置是否必传和参数类型。

类型声明的方式2： 在类型方式1的基础上，增加了设置 prop 默认值

---

其他声明类型

let w:Window = window
let ele:HTMLElement = document.createElement('div')
let allDiv: NodeList = document.querySelectorAll('div')

ele.addEventListener('click',function(e:MouseEvent){
    const args:IArguments = arguments
    w.alert(1)
    console.log(args)
},false)

如用泛型方式声明类型，限制请求访问的接口

import axios from 'axios'
interface Api{
    '/user/get_user':{
        id:number
    },
    '/user/up_user':{
        id:number,
        message:string
    }
}
function request(url:T,obj:Api[T]){
    return axios.post(url,obj)
}

request('/user/get_user',{id:1})
request('/user/up_user',{id:1,message:'嘎嘎好看'})
request('/user/up_user',{id:1}) //如果message必传 则会提醒缺少参数
request('/user/404',{id:1}) //接口不存在 提示错误

Composition API 所有的类型设置的时候，可进入项目目录下的 node_modules/@vue/reactivity/dist/reactivity.d.ts 中查看