vuex4+typescript实现智能提示

前言

vue3已经被作为默认版本发布快三个月了，但是目前还没有使用vue3+ts独立开发过项目，刚好自己在后台系统方面涉猎较少，于是决定使用vue3+ts开发一个后台管理系统，在数据管理时，对于跨了很多层级的组件间的共享数据就采用vuex进行储存和获取，为了充分发挥ts的功能，决定实现在使用vuex调用方法时智能提示方法名，也算是督促自己多学学ts

个人学习笔记，欢迎指正

ts基础语法

既然作为学习笔记，当然要记录一下自己学到的一些ts语法（很基础的东西我就不再记录了）

interface vs type

interface 是一种约束或规范，通常用接口来定义对象的类型

interface Person{
    name:string,
    age:number,
    height?:number
}

let Yzh:Person ={
    name:"yzh",
    age:19
    //height由于接口加了？，所以可有可无，但是前两个属性必须有
} 

type（类型别名）用来给一个类型起一个新名字，可以同接口一样描述对象或函数，不同之处在于其还可以声明基本类型别名，联合类型，元组等类型

type Person{
    name:string,
    age:number
}

let Yzh:Person ={
    name:"yzh",
    age:19
} 

typeof vs keyof

typeof 操作符用来获取一个变量或者对象的类型

//对于不知道类型的变量，可以借助该操作符获取
import {useRoute} from "vue-Router";

const route =useRoute()
type RouteType =typeof route 

keyof操作符可以提取其属性的名称，返回一个联合类型（后续会提到）

type Person{
    name:string,
    age:number
}

type keys =keyof Person; //"name" | "age" 

泛型 && 泛型约束 && 泛型推断

泛型可以理解为在编译期间不确定方法的类型，在方法调用时，由程序员指定泛型具体指向什么类型

泛型的作用：通常解决类，接口，方法的复用性，以及对非特定数据类型的支持

//举一个应用场景，定义一个函数，接收什么一个任意类型的数据然后返回该数据
function backArg(arg:any):any{
    return arg
}
//貌似是实现了，但是有一个问题，该问题隐含的是接收类型和返回类型要一致，即设置any虽然实现了可以接收任意类型的参数但是不能保证接收类型与返回类型一致

function backArg<T>(arg:T):T{
    return arg
}
backArg<string>("success");
backArg<number>(200)
//即先借助<>定义一个泛型类型，然后在实际调用中根据不同情况我们传递给它相应类型 

一个常见的问题，获取一个object的某个属性值，但是我们获取时，编译器不知道该object类型是否有该属性就会报错

对于这种情况，如果我们知道object的具体属性，可以直接定义一个接口进行约束，就不会有相应问题，但问题如果不知道该object的属性值都有什么该怎么办，采用类型约束

const userInfo ={
    name:"yzh",
    age:19
}

function getKey(o:object,name:string){
    return o[name]; //Error:'string' can't be used to index type '{}'.
}

//采用类型约束
function getKey<T extends object,K extends keyof T>(obj:T,key:K):T[K]{
    return obj[key]
}
//keyof T为一个联合类型（设为U），K extends U表示K受U约束，可以简单理解为extends后的内容为前面泛型的接口
//即K需要为联合类型U中属性值的一种

//值得一提的是：这里的extends不同于面向对象的继承，而是表示一种约束关