哪些写法是固定写法
总结一下 TypeScript 在 Vue3 中的一些固定写法：
- Props 定义
// 固定写法 1：使用 defineProps
defineProps<{
title: string
count: number
isActive?: boolean // 可选属性
}>()
// 固定写法 2：带默认值的 props
withDefaults(defineProps<{
title: string
count: number
isActive?: boolean
}>(), {
isActive: false
})- Emits 定义
// 固定写法：定义事件
const emit = defineEmits<{
(e: 'update', value: string): void
(e: 'delete'): void
}>()
// 使用方式
emit('update', newValue)
emit('delete')- ref 定义
// 固定写法：基础类型
const count = ref<number>(0)
const message = ref<string>('')
const isLoading = ref<boolean>(false)
// 固定写法：DOM 元素
const divEl = ref<HTMLDivElement | null>(null)
const inputEl = ref<HTMLInputElement | null>(null)
const formEl = ref<HTMLFormElement | null>(null)- reactive 定义
// 固定写法：对象类型
interface State {
count: number
message: string
user: {
name: string
age: number
}
}
const state = reactive<State>({
count: 0,
message: '',
user: {
name: '',
age: 0
}
})- 计算属性
// 固定写法：computed
const doubleCount = computed<number>(() => count.value * 2)
// 带 get/set 的计算属性
const fullName = computed<string>({
get() {
return `${firstName.value} ${lastName.value}`
},
set(newValue: string) {
[firstName.value, lastName.value] = newValue.split(' ')
}
})- 事件处理函数
// 固定写法：事件处理
function handleClick(event: MouseEvent): void {
console.log(event.target)
}
function handleInput(event: Event): void {
const target = event.target as HTMLInputElement
console.log(target.value)
}
function handleSubmit(event: SubmitEvent): void {
event.preventDefault()
}- 组件实例类型
// 固定写法：组件实例
import { ComponentPublicInstance } from 'vue'
const componentRef = ref<ComponentPublicInstance | null>(null)
// 自定义组件类型
interface CustomComponent {
reload(): void
clear(): void
}
const customRef = ref<CustomComponent | null>(null)- 生命周期钩子
// 固定写法：生命周期
onMounted((): void => {
console.log('mounted')
})
onBeforeUnmount((): void => {
console.log('before unmount')
})- watch/watchEffect
// 固定写法：watch
watch(count, (newValue: number, oldValue: number): void => {
console.log(newValue, oldValue)
})
// 固定写法：watchEffect
watchEffect((): void => {
console.log(count.value)
})- 类型断言
// 固定写法：类型断言
const element = event.target as HTMLInputElement
const userInfo = reactive({}) as { name: string, age: number }- 泛型组件
// 固定写法：泛型组件
interface GenericProps<T> {
items: T[]
selected: T
}
defineProps<GenericProps<{ id: number, name: string }>>()这些是最常用的固定写法，记住这些可以帮助你：
- 快速开始 TypeScript + Vue3 开发
- 避免常见的类型错误
- 提高开发效率
建议：
- 先掌握这些基础的固定写法
- 在实际项目中逐步应用
- 随着深入学习再扩展更复杂的用法
- 善用 IDE 的代码提示功能