TIP
typescript 配合 Vue3 composition-api 使用
script 加上 lang="ts" 才能写ts代码
<script setup lang="ts"></script>
defineProps的TS写法
1. defineProps 的基本使用：
const props = defineProps({
money: {
type: Number,
required: true
},
car: {
type: String,
required: false,
default: '宝马车'
}
})
console.log(props.money) // number
console.log(props.car) // string | undefined2. defineProps 通过泛型参数来定义 props 的类型通常更直接：
const props = defineProps<{
money: number
car?: string
}>()
我们也可以将 props 的类型移入一个单独的接口中：
<script setup lang="ts">
interface Props {
foo: string
bar?: number
}
const props = defineProps<Props>()
</script>3. 给 props 设置默认值
可以使用 响应式语法糖
https://cn.vuejs.org/guide/extras/reactivity-transform.html#reactive-props-destructure 解构 + defineProps 就行
const { money, car = "宝马车" } = defineProps<{
money: number
car?: string
}>();但是，这个响应式语法糖需要显示地选择开启 reactivityTransform， 因为它还是一个实验性特性显式地选择开启https://cn.vuejs.org/guide/extras/reactivity-transform.html#explicit-opt-in响应性语法糖 | Vue.js
// vite.config.ts
export default defineConfig({
plugins: [
vue({
reactivityTransform: true,
}),
],
}); 需要给 props 设置默认值，也可以使用 withDefaults 函数：但是这种写法比较笨拙
const props = withDefaults(defineProps<{
money: number;
car?: string;
}>(),{
car: '宝马车'
})
// 第二个对象中是设置默认值的，了解
注意：
接口或对象字面类型可以包含从其他文件导入的类型引用，但是，传递给 defineProps 的泛型参数本身不能是一个导入的类型：这是因为 Vue 组件是单独编译的，编译器目前不会抓取导入的文件以分析源类型。
import { Props } from './other-file'
// 不支持！
defineProps<Props>()defineEmits的TS写法
1. defineEmits 的基本用法：
const emit = defineEmits(['changeMoney', 'changeCar'])2. defineEmits 通过泛型参数来定义，可以实现更细粒度的校验：
const emit = defineEmits<{
(e: 'changeMoney', money: number): void
(e: 'changeCar', car: string): void
}>()
emit('changeMoney', 10 )
emit('changeCar', '10')ref的TS写法
ref() 会隐式的依据数据推导类型
1. 如果是简单类型，推荐使用类型推导：
const money = ref(10)2. 如果是复杂类型，推荐指定泛型：
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 }
]
}, 1000)reactive的TS写法
reactive() 也会隐式的依据数据推导类型
1. 默认值属性是固定的，推荐使用类型推导：
// 推导得到的类型：{ title: string }
const book = reactive({ title: 'Vue3 在线医疗' })
2. 默认值推导不出需要的类型：
推荐使用接口或者类型别名给变量指定类型
- 官方：不推荐使用
reactive()的泛型参数，因为底层和ref()实现不一样。
// 我们想要的类型：{ title: string, year?: number }
type Book = {
title: string
year?: number
}
const book: Book = reactive({ title: 'Vue3 在线医疗' })
book.year = 2022computed和TS
computed() 会从其计算函数的返回值上推导出类型
import { ref, computed } from 'vue'
const count = ref(100);
const doubleCount = computed(() => count.value * 2);可以通过泛型参数显式指定类型
const doubleMoney = computed<string>(() => (count.value * 2).toFixed(2));
事件处理与TS
不加类型，event默认是any，类型不安全：
<script setup lang="ts">
// 提示：参数“event”隐式具有“any”类型。
const handleChange = (event) => {
console.log(event.target.value)
}
</script>
<template>
<input type="text" @change="handleChange" />
</template>处理类型：document.querySelector('input') 查看返回值类型
// `event` 隐式地标注为 `any` 类型，如何指定：event 类型?
// 1. @change="handleChange($event)"" 查看$event类型
// 2. 鼠标摸一下事件 @change 查看类型
const handleChange = (event: Event) => {
// `event.target` 是 `EventTarget | null` 类型，如何指定具体类型？
// document.querySelector('input') 查看返回值类型
console.log((event.target as HTMLInputElement).value)
}Template Ref与TS
模板 ref 需要通过一个显式指定的泛型参数，建议默认值 null
<script setup lang="ts">
import { ref, onMounted } from 'vue'
const el = ref<HTMLInputElement| null>(null)
onMounted(() => {
el.value?.focus()
})
</script>
<template>
<input ref="el" />
</template>
- 注意为了严格的类型安全，有必要在访问
el.value时使用可选链或类型守卫。 - 这是因为直到组件被挂载前，这个
ref的值都是初始的null，并且在由于v-if的行为将引用的元素卸载时也可以被设置为null。
非空断言
处理类型可能是 null 或 undefined 的值，下面的属性或函数的访问赋值：
1. 可选链 -只能访问
<script setup lang="ts">
import { onMounted, ref } from 'vue';
const input = ref< HTMLInputElement | null >(null)
onMounted(()=>{
// 只能访问
console.log(input.value?.value);
})
</script>
<template>
<div>App组件</div>
<input type="text" ref="input" value="abc">
</template>2. 逻辑判断
if (input.value) {
console.log(input.value.value)
input.value.value = '123'
}3. 非空断言
// 一定要确定不为空！！！
console.log(input.value!.value)
input.value!.value = '123'