外观
TypeScript与Vue
defineProps与Typescript
defineProps配合vue默认语法进行类型校验（运行时声明）。
// 运行时声明
defineProps({
money: {
type: Number,
required: true
},
car: {
type: String,
required: true
}
})defineProps配合ts的泛型定义props类型校验，这样更直接。
// 使用ts的泛型指令props类型
defineProps<{
money: number
car?: string
}>()props可以通过解构来指定默认值。
// 使用ts的泛型指令props类型
const { money, car = '小黄车' } = defineProps<{
money: number
car?: string
}>()如果提供的默认值需要在模板中渲染，需要额外添加配置。
// vite.config.ts
export default {
plugins: [
vue({
reactivityTransform: true
})
]
}defineEmits与Typescript
defineEmits配合运行时声明：
const emit = defineEmits(['change', 'update'])defineEmits配合ts 类型声明，可以实现更细粒度的校验：
const emit = defineEmits<{
(e: 'changeMoney', money: number): void
(e: 'changeCar', car: string): void
}>()ref与Typescript
通过泛型指定value的值类型，如果是简单值，该类型可以省略：
const money = ref<number>(10)
const money = ref(10)如果是复杂类型，推荐指定泛型：
type Todo = {
id: number
name: string
done: boolean
}
const list = ref<Todo[]>([])
setTimeout(() => {
list.value = [
{id: 1, name: '吃饭', done: false},
{id: 2, name: '睡觉', done: true}
]
})computed与Typescript
通过泛型可以指定computed计算属性的类型，通常可以省略：
const leftCount = computed<number>(() => {
return list.value.filter((item) => item.done).length
})
console.log(leftCount.value)事件处理与Typescript
<script>
const move = (e: MouseEvent) => {
mouse.value.x = e.pageX
mouse.value.y = e.pageY
}
</script>
<template>
<h1 @mousemove = "move($event)" > 根组件 </h1>
</template>Template Ref与Typescript
const imgRef = ref<HTMLImageElement | null>(null)
onMounted(() => {
console.log(imgRef.value?.src)
})如何查看一个DOM对象的类型：通过控制台进行查看。
document.createElement('img').__proto__可选链操作符
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。
let nestedProp = obj.first?.second;
console.log(res.data?.data)
obj.fn?.()
if (obj.fn) {
obj.fn()
}
obj.fn && obj.fn()
// 等价于
let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);非空断言
如果我们明确的知道对象的属性一定不会为空，那么可以使用非空断言 !。
// 告诉typescript, 明确的指定obj不可能为空
let nestedProp = obj!.second;非空断言一定要确保有该属性才能使用，不然使用非空断言会导致bug。