在前端开发中,TypeScript 和 Vue.js 的组合越来越受到青睐。TypeScript 的强类型系统和 Vue.js 的组件化架构相得益彰,可以帮助你编写更可靠和易维护的代码。如果你已经掌握了 TypeScript 的基本语法,但不太确定怎么将它与 Vue.js 配合使用,本文将带你一步步理解如何在 Vue.js 项目中应用 TypeScript,提升你的开发效率。
为组件的props标注类型
import type { PropType } from 'vue'
const props = defineProps<{
foo: string
bar?: number
}>()
interface Props {
foo: string
bar?: number
}
//第二种
//const props1 = defineProps<Props>()
//第三种
//const props2 = defineProps({
// book: Object as PropType<Book>
// })
当使用基于类型的声明时,我们失去了为 props 声明默认值的能力。这可以通过 withDefaults
编译器宏解决:
export interface Props {
msg?: string
labels?: string[]
}
const props = withDefaults(defineProps<Props>(), {
msg: 'hello',
labels: () => ['one', 'two']
})
为组件的 emits 标注类型
为 ref()
标注类型
// 推导得到的类型:Ref<number | string>
const year = ref<string | number>('2020')
const year1: Ref<string | number> = ref('2020')
//如果想没有undefined 必须要给默认值
const n = ref<number>() //Ref<number | undefined>
const n1 = ref<number>(1)//Ref<number>
为 reactive()
标注类型
import { reactive } from 'vue'
interface Book {
title: string
year?: number
}
const book: Book = reactive({ title: 'Vue 3 指引' })
为 computed()
标注类型
const double = computed<number>(() => { // 若返回值不是 number 类型则会报错 })
为事件处理函数标注类型
在处理原生 DOM 事件时,应该为我们传递给事件处理函数的参数正确地标注类型。让我们看一下这个例子
<script setup lang="ts">
function handleChange(event) {
// `event` 隐式地标注为 `any` 类型
console.log(event.target.value)
}
function handleChange(event: Event) {
console.log((event.target as HTMLInputElement).value)
}
</script>
<template>
<input type="text" @change="handleChange" />
</template>
为 provide / inject 标注类型
import { provide, inject } from 'vue'
import type { InjectionKey } from 'vue'
const key = Symbol() as InjectionKey<string>
provide(key, 'foo') // 若提供的是非字符串值会导致错误
const foo = inject(key) // foo 的类型:string | undefined
//或
const foo = inject<string>('foo') // 类型:string | undefined
//提供默认值
const foo = inject<string>('foo', 'bar') // 类型:string
为模板引用标注类型
模板引用需要通过一个显式指定的泛型参数和一个初始值 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>
为组件模板引用标注类型
<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from 'vue'
const isContentShown = ref(false)
const open = () => (isContentShown.value = true)
defineExpose({
open
})
</script>
为了获取 MyModal
的类型,我们首先需要通过 typeof
得到其类型,再使用 TypeScript 内置的 InstanceType
工具类型来获取其实例类型:
<!-- App.vue -->
<script setup lang="ts">
import MyModal from './MyModal.vue'
const modal = ref<InstanceType<typeof MyModal> | null>(null)
const openModal = () => {
modal.value?.open()
}
</script>
如果对你有所帮助就点个关注吧