参考链接：https://vuejs.org/guide/typescript/composition-api.html
vue3配合ts中，还需要额外安装一个vscode插件：Typescript Vue Plugin
defineProps与Typescript
目标：掌握defineProps如何配合ts使用
- defineProps配合vue默认语法进行类型校验（运行时声明）
// 运行时声明 defineProps({ money: { type: Number, required: true }, car: { type: String, required: true } })
- defineProps配合ts的泛型定义props类型校验，这样更直接
// 使用ts的泛型指令props类型 defineProps<{ money: number car?: string }>()
- props可以通过解构来指定默认值
<script lang="ts" setup> // 使用ts的泛型指令props类型 const { money, car = '小黄车' } = defineProps<{ money: number car?: string }>() </script>
如果提供的默认值需要在模板中渲染，需要额外添加配置
https://vuejs.org/guide/extras/reactivity-transform.html#explicit-opt-in
// vite.config.js export default { plugins: [ vue({ reactivityTransform: true }) ] }
defineEmits与Typescript
目标：掌握defineEmit如何配合ts使用
- defineEmits配合运行时声明
const emit = defineEmits(['change', 'update'])
- defineEmits配合ts 类型声明，可以实现更细粒度的校验
const emit = defineEmits<{ (e: 'changeMoney', money: number): void (e: 'changeCar', car: string): void }>()
ref与Typescript
目标：掌握ref配合ts如何使用
- 通过泛型指定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 } ] })
reactive与Typescript
目标：掌握reactive配合typescript如何使用
// reactive 适合于明确属性的对象场景 type User = { name: string age: number }; const obj: User = reactive({ name: "zs", age: 18 });
computed与Typescript
目标：掌握computed配合typescript如何使用
- 通过泛型可以指定computed计算属性的类型，通常可以省略
const leftCount = computed<number>(() => { return list.value.filter((item) => item.done).length }) console.log(leftCount.value)
事件处理与Typescript
目标：掌握事件处理函数配合typescript如何使用
const move = (e: MouseEvent) => { mouse.value.x = e.pageX mouse.value.y = e.pageY } <h1 @mousemove="move($event)">根组件</h1>
Template Ref与Typescript
目标：掌握ref操作DOM时如何配合Typescript使用
const imgRef = ref<HTMLImageElement | null>(null) onMounted(() => { console.log(imgRef.value?.src) })
如何查看一个DOM对象的类型：通过控制台进行查看
document.createElement('img').__proto__
可选链操作符
目标：掌握js中的提供的可选链操作符语法
内容
- 可选链操作符(
?.)允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。 - 参考文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining
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);
非空断言
目标：掌握ts中的非空断言的使用语法
内容：
- 如果我们明确的知道对象的属性一定不会为空，那么可以使用非空断言
!
// 告诉typescript, 明确的指定obj不可能为空 let nestedProp = obj!.second;
- 注意：非空断言一定要确保有该属性才能使用，不然使用非空断言会导致bug
