哪些写法是固定写法

总结一下 TypeScript 在 Vue3 中的一些固定写法：

1. Props 定义

// 固定写法 1：使用 defineProps
defineProps<{
    title: string
    count: number
    isActive?: boolean  // 可选属性
}>()

// 固定写法 2：带默认值的 props
withDefaults(defineProps<{
    title: string
    count: number
    isActive?: boolean
}>(), {
    isActive: false
})

1. Emits 定义

// 固定写法：定义事件
const emit = defineEmits<{
    (e: 'update', value: string): void
    (e: 'delete'): void
}>()

// 使用方式
emit('update', newValue)
emit('delete')

1. 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)

1. reactive 定义

// 固定写法：对象类型
interface State {
    count: number
    message: string
    user: {
        name: string
        age: number
    }
}

const state = reactive<State>({
    count: 0,
    message: '',
    user: {
        name: '',
        age: 0
    }
})

1. 计算属性

// 固定写法：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(' ')
    }
})

1. 事件处理函数

// 固定写法：事件处理
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()
}

1. 组件实例类型

// 固定写法：组件实例
import { ComponentPublicInstance } from 'vue'

const componentRef = ref<ComponentPublicInstance | null>(null)

// 自定义组件类型
interface CustomComponent {
    reload(): void
    clear(): void
}
const customRef = ref<CustomComponent | null>(null)

1. 生命周期钩子

// 固定写法：生命周期
onMounted((): void => {
    console.log('mounted')
})

onBeforeUnmount((): void => {
    console.log('before unmount')
})

1. watch/watchEffect

// 固定写法：watch
watch(count, (newValue: number, oldValue: number): void => {
    console.log(newValue, oldValue)
})

// 固定写法：watchEffect
watchEffect((): void => {
    console.log(count.value)
})

1. 类型断言

// 固定写法：类型断言
const element = event.target as HTMLInputElement
const userInfo = reactive({}) as { name: string, age: number }

1. 泛型组件

// 固定写法：泛型组件
interface GenericProps<T> {
    items: T[]
    selected: T
}

defineProps<GenericProps<{ id: number, name: string }>>()

这些是最常用的固定写法，记住这些可以帮助你：

• 快速开始 TypeScript + Vue3 开发
• 避免常见的类型错误
• 提高开发效率

建议：

1. 先掌握这些基础的固定写法
2. 在实际项目中逐步应用
3. 随着深入学习再扩展更复杂的用法
4. 善用 IDE 的代码提示功能