vue3.0+TS使用

零凌林

已于 2024-10-21 09:37:58 修改

阅读量8.2k

点赞数 10

分类专栏： TypeScript的世界 vue3的世界文章标签：前端 javascript 开发语言 typescript vue.js

于 2022-11-26 21:07:55 首次发布

本文链接：https://blog.youkuaiyun.com/yxlyttyxlytt/article/details/128057058

版权

vue3的世界同时被 2 个专栏收录

17 篇文章

订阅专栏

TypeScript的世界

3 篇文章

订阅专栏

开发语法

ts+ref

//定义简单数据类型
//需要注意，指定了一个泛型参数但没有给出初始值，那么最后得到的就将是一个包含 undefined 的联合类型：
// 推导得到的类型：Ref<boolean | undefined>
const show = ref<boolean>(false);
或者
const show：Ref<string> = ref(false);
//简单数据类型赋值
const handleShow = ():void=>{
    show.value = true
}
//---------------------------------------------------------------------------------------
//定义复杂数据类型
interface ArrListType {
    name:string
    age:number
    des:string
}
type ObjListType = partial<ArrListType>

const arrList = ref<ArrListType[]>([])
const objData = ref<ObjListType>({})
//复杂数据类型赋值
const handleArr = ()=>{
    //mock数据
    const res = [{name:'x',age:10,des:'x'},{name:'y',age:11,des:'y'}]
    arrList.value = res
}
const handleObj = ()=>{
    //mock数据
    const res = {name:'x',age:10,des:'x'}
    arrList.value = res
}

ts+reactive

type menuListType={
	menuId:number;
	meuName:syring
}
interface dataType {
	menuList:menuListType[]
    userInfo:userInfoType[]
}
//如果使用reactive，建议使用下面的深层数据类型，我们在点的时候不会破坏reactive的proxy代理
const data =reactive<dataType>({
	menuList:[],
	userInfo:[]
})
或者
//不推荐使用 reactive() 的泛型参数，因为处理了深层次 ref 解包的返回值与泛型参数的类型不同。推荐下方的显式标注类型
const data:dataType =reactive({
	menuList:[],
	userInfo:[]
})
//处理数据
const handleData = ()=>{
    //mock数据
    const res = [{menuId:111,meuName:'haha'}]
    data.menuList = res
}
//---------------------------------------------------------------------------------------
//对于浅层的数据类型，我们并不推荐使用reactive，ref更适合，下方仅做了解
interface dataType {
	menuId:number,
    menuName:string
}
const data = reactive<dataType[]>([])
//处理数据
const handleData = ()=>{
    //mock数据
    const res = [{menuId:111,meuName:'haha'}]
    //这里赋值不能直接=赋值，否则会破坏proxy代理，所以需要解构push进去
    dataType.push(...res)
}
//因为是push进去的，难免会因为重复请求，而造成数据重复，这个时候在适当的时候置空数据，同样不能使用=[]进行置空，而是：
dataType.slice(0)

获取组件 ref 实例+ts

使用 vue3 和 ts 时，为了获取组件 ref 实例，就需要在 ref 函数的泛型中指定类型。如何获取组件的类型呢？vue 官方文档中 TypeScript 支持里已经告诉我们了一个获取组件类型的方法，InstanceType<typeof 组件名称>，使用方式如下：

//为了获取组件的类型，我们首先需要通过 typeof 得到其类型，再使用 TypeScript 内置的 InstanceType 工具类型来获取其实例类型：
const $userForm = ref<InstanceType<typeof userForm>|null>(null);

ref实例+ts

//子组件
<NewsDialog ref="news" @refreshData="getList()"></NewsDialog>
//导入子组件
import NewsDialog from './components/NewsDialog.vue'
//获取子组件实例
const news = ref<InstanceType<typeof NewsDialog>>()            
//打开消息弹窗
const openNewsDialog = (): void => {
  news.value?.showDialog()
}

//子组件暴露方法
defineExpose({
  showDialog,
});

处理原生 DOM 事件时 + ts

//input标签 
<input
  type="text"
  class="search"
  ref="input"
  v-model="inputValue"
  placeholder="队伍名称最多6个字"
  maxlength="6"
/>
 
const input = ref<HTMLElement | null>(null); 
//获取焦点
(input.value as HTMLInputElement).focus();

ts结合prop使用（父传子）

注意：传递给 defineProps 的泛型参数本身不能是一个导入的类型：

//vue3+js的写法
const props = defineProps({
    id:{
        type:Number,
        default:0
    }
    arr{
    	type:Array
        default:()=>[]
	}
})
//vue3+ts写法
interface PropType = {
    id:number
    arr:string[]
}
const props = defineProps<PropType>()
//props 声明默认值 通过 withDefaults 编译器宏解决  推荐
const props = withDefaults(defineProps<PropType>(), {
  id: 1,
  arr: () => ['one', 'two']
})
//下面的默认值写法暂时还处在实验性阶段，了解为主
const { id, arr=[] } = defineProps<PropType>()

ts结合emit使用（子传父）

//vue3+js的写法
const emits = defineEmits(['change', 'update'])
//vue3+ts写法
const emits = defineEmits<{
	(e:'change'):void,
	(e:'update',value:string):void
}>()

ts+computed

computed() 会自动从其计算函数的返回值上推导出类型：

const count = ref(0)
// 推导得到的类型：ComputedRef<number>
const double = computed(() => count.value * 2)
// => TS Error: Property 'split' does not exist on type 'number'
const result = double.value.split('')

//当然，也可以通过泛型参数显式指定类型：
const double = computed<number>(() => {
  // 若返回值不是 number 类型则会报错
})

provide / inject + ts

import { provide, inject } from 'vue'
import type { InjectionKey } from 'vue'
//建议将key抽出去，方便复用
const key = Symbol() as InjectionKey<string>

provide(key, 'foo') // 若提供的是非字符串值会导致错误

const foo = inject(key) // foo 的类型：string | undefined

ts+pinia

在pinia里已经去掉了mutation

首先要安装全局依赖npm i pinia

//封装使用的pinia   在store/index.ts里
//导入defineStore
import { defineStore } from 'pinia'
//导入接口
import { getBoxConfigApi } from '@/api/GuardBox'
//定义数据接口
export interface giftInfoType {
  use_gift_id: number
  count: number
  level: number
  gift: {
    id: number
    name: string
  }
}
//定义数据接口
interface AllConfigType {
  all_config: Partial<{
    title_img: string
    date_range: string[]
    year_select: string[]
    ttl: string
    constellation: string
    user_level: string
  }>
  gift_info: giftInfoType[]
}
//使用pinia
export const useStore = defineStore('main', {
  state: (): AllConfigType => ({
    all_config: {},
    gift_info: [],
  }),
  actions: {
    async getConfig(level = 1) {
      const { data } = await getBoxConfigApi({ level })
      this.all_config = data.all_config
      this.gift_info = data.gift_info
      return data
    },
  },
})


//引用pinia  在homePage.vue里
<script setup lang="ts">
import { useStore } from '@/store'
const store = useStore()
// 礼物配置信息
const giftConfigInfo = ref<giftInfoType[]>([])
// 获取礼物信息
const getGiftInfo = async (): Promise<void> => {
  const { gift_info } = await store.getConfig(activeIndex.value)
  giftConfigInfo.value = gift_info
}
getGiftInfo()
</script>

ts定义异步空返回值函数

const getList = async (): Promise<void> => {
    const {data} = await getListApi();
    ...
}

拓展：

vue3相比vue2的优势？

Vue 3 相比 Vue 2 在许多方面都有显著的改进和优势。以下是一些主要的改进：

1. 性能优化

更快的虚拟 DOM: Vue 3 使用 Proxy 作为其响应式系统的核心，这比 Vue 2 的 Object.defineProperty 更加高效和灵活。
编译时优化: Vue 3 在编译时进行了一些优化，如静态树提升和静态属性提升，这些优化可以显著提高应用的性能。

2. Composition API

更好的逻辑复用: Composition API 允许开发者将相关的逻辑组织在一起，而不是被限制在组件选项中。这使得逻辑复用更加方便和灵活。
更好的类型支持: Composition API 与 TypeScript 更加友好，可以提供更好的类型检查和自动补全。

3. Fragments

更灵活的组件结构: Vue 3 支持组件有多个根元素（Fragments），这使得开发者可以更灵活地组织组件结构。

4. Teleport

更灵活的组件渲染位置: Vue 3 引入了 Teleport 组件，它允许开发者将组件渲染到 DOM 树的其他位置，而不是当前组件的父级。这在处理模态框、通知等场景时非常有用。

5. Suspense

更好的异步组件处理: Vue 3 引入了 Suspense 组件，它允许开发者处理异步组件的加载状态。Suspense 可以与 Composition API 一起使用，以更优雅地处理异步操作。

6. 自定义渲染器

更灵活的渲染器扩展: Vue 3 提供了更灵活的自定义渲染器 API，这使得开发者可以创建自己的渲染器，如用于原生 Web Components 的渲染器。

7. TypeScript 支持

更好的 TypeScript 集成: Vue 3 是用 TypeScript 编写的，并且对 TypeScript 提供了更好的支持。这使得 Vue 3 更适合大型项目和团队协作。

8. 其他变化

全局 API 的变化: Vue 3 对全局 API 进行了重构，许多全局 API 现在是应用实例的方法。
生命周期钩子的变化: Vue 3 对生命周期钩子的命名和调用顺序进行了调整。
模板语法的变化: Vue 3 对模板语法进行了一些微调，以更好地支持 Composition API。

总的来说，Vue 3 在性能、灵活性、类型支持和开发体验方面都有显著的改进。然而，这些改进也意味着从 Vue 2 迁移到 Vue 3 可能需要一些时间和努力。

TypeScript 的优点

TypeScript 是 JavaScript 的一个超集，它添加了静态类型系统。以下是 TypeScript 的一些主要优点：

1. 静态类型检查

减少运行时错误: TypeScript 的静态类型系统可以在编译时捕获许多类型错误，这可以减少运行时错误的发生。
更好的代码补全和重构: TypeScript 的类型信息可以帮助 IDE 提供更好的代码补全和重构功能，提高开发效率。

2. 更好的代码可读性和可维护性

清晰的接口定义: TypeScript 允许开发者定义接口和类型，这有助于清晰地表达代码的意图和结构。
文档生成: TypeScript 的类型信息可以自动生成文档，这对于大型项目和团队协作非常有用。

3. 更好的团队协作

类型检查: TypeScript 的类型检查可以帮助团队成员更好地理解代码，减少沟通成本。
代码风格一致性: TypeScript 的类型信息可以帮助 IDE 强制执行一致的代码风格。

4. 更好的工具支持

更好的 IDE 支持: TypeScript 的类型信息可以帮助 IDE 提供更好的代码补全、错误检查和重构功能。
更好的构建工具支持: TypeScript 的类型信息可以帮助构建工具（如 webpack、rollup 等）进行更好的优化和错误检查。

5. 更好的错误处理

更早的错误捕获: TypeScript 的静态类型检查可以在编译时捕获许多错误，这可以更早地发现和修复错误。
更清晰的错误信息: TypeScript 的类型信息可以帮助提供更清晰的错误信息，帮助开发者更快地定位问题。