先演示下 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 中查看
