TypeScript 在 Vue.js 中的应用指南

news2024/9/21 20:24:27

在这里插入图片描述

在前端开发中，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>