vue3 ts中常用的类型推断

一.全局定义的方法类型推断

通常在组件中是不需要定义全局变量的，直接使用即可，但这里会有一个问题，ts会检测当前变量的类型或者是组件的语法等，在编译阶段会报错，那么如何解决这个问题呢？

1.将挂载在vue实例上的变量对象按需导入到当前组件

//vue3取消了filters，推荐使用计算属性等来替代，但是又不想这么做的话，就可以导入模块的方式

filters.ts

export const filters1 = (): {}=>{}
export const filters2 = (): {}=>{}
export const filters3 = (): {}=>{}


.vue

import filters from './filters'

2.给vue来扩展一些方法、变量类型，不用导入就可以直接使用

//扩展一下vue module 文件放置于项目根目录
declare module "vue" {
  interface ComponentCustomProperties {
    $fomatter: any; //可以设置进行类型推导
  }
}

export {}; //记得必须添加这个到处标记

二.组件内ts断言语法

1.针对数组的类型断言

//使用map 对于未定义上层类型的对象来讲 最好强制这样，对于响应式数组还得使用reactive
let json_obj = {}
(json_obj.arr as Array<any> | any[] ).map()

2.当然的联合类型

ref与reactive定义下的响应式变量如果具有空的联合类型，ts null提示

可以考虑使用 ! 或者 ?  进行强制进一步推断

类如：

const mini = ref<string | null | undefined>();
mini.value!.toString()
mini.value?.toString()

本次发文 本年定当笔耕不辍。