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[] ).map()
 

2.当然的联合类型

ref与reactive定义下的响应式变量如果具有空的联合类型，ts null提示
 
可以考虑使用 ! 或者 ?  进行强制进一步推断
 
类如：
 
const mini = ref<string | null | undefined>();
mini.value!.toString()
mini.value?.toString()
 

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