TS+vue3中的声明类型

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

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

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

const msg2 = computed(() => '') // 默认参数推导 msg2: ComputedRef<string>
const course2 = computed<ty>(() => {
  // course2: ComputedRef<ty>
  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<string[]>
})

withDefaults 用于defineProps绑定默认值的api

defineProps 只能是要么使用运行时声明，要么使用typescript类型声明。同时使用两种声明方式会导致编译报错。
defineProps、withDefaults 是只在 <script setup> 语法糖中才能使用的编译器宏。他不需要导入且会随着 <script setup> 处理过程一同被编译掉。

运行时声明 的方式只能设置参数类型、默认值、是否必传、自定义验证。
若想设置[ 编辑器报错、编辑器语法提示 ]则需要使用类型声明的方式。

<script lang='ts' setup>
const props = defineProps({
  child: {
    type:String, // 参数类型
    default: 1, //默认值
    required: true, //是否必传
    validator: value => {
      return value >= 0 // 除了验证是否符合type的类型，此处再判断该值结果是否符合验证
    }
  },
  sda: String, //undefined
  strData: String,
  arrFor: Array
})
</script>

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

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

<script lang='ts' setup>
interface Props {
 either: '必传且限定'|'其中一个'|'值', // 利用TS：限定父组件传 either 的值
 child: string|number,
 sda?: string, // 未设置默认值，为 undefined
 strData: string,
 msg?: string
 labels?: string[],
 obj?:{a:number}
}
const props = withDefaults(defineProps<Props>(), {
 msg: 'hello',
 labels: () => ['one', 'two'],
 obj: () => { return {a:2} }
})
</script>

---

其他声明类型

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<T extends keyof Api>(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 中查看