甘肃龙网

  1. 首页 > 生活 > >

一 vue3基础composition api，typeof，keyof( 二 )

生活百科操作


模拟的接口：
引入
先在shims.vue.dts中声明一个的
在 类型声明文件 中找到，这样引入就不会报错了
引入mock并使用：
mock文件（mock中index）配置
main.js/main.ts中引入mock的拦截方法
替换成正常接口的两种方法：
第一种去mian.ts中去注释掉
第二种：mock的引入
第二种：
更改配置项
去axios封装的文件（http/index）中去更改，去决定是否使用mock
mock返回值的另一种写法：
使用模版字符串写法，并｜数字，数字代表生成多少组数据
正常是一组，｜5代表5组就是data里生成五个一样的对象(‘data|5’)

一 vue3基础composition api，typeof，keyof

文章插图
创建ts接口和class规定 对象参数类型范围
Array 和 T[] 等价，都是声明数组类型，推荐后者 。
是中的基本类型，但是个类类型 。
标签中 lang=“ts”，代表是写的是ts版本的vue，而不是在ts环境下去写vue
这两者是有 质的差别 的
接口参数，ts文件指定 泛型，vue页中调用使用
然后 data 让外部调用
new ()是第一张图中最后输出（）的class 的实例化
使用就得用data.参数名
不想用data.
就用（data）
data.jobs = toRefs(res.data)
就可以直接使用jobs了
keyof
keyof操作接口
interface Person {name: string;age: number;location: string;}type K1 = keyof Person; // "name" | "age" | "location"type K2 = keyof Person[];// number | "length" | "push" | "concat" | ...type K3 = keyof { [x: string]: Person };// string | number
除了接口外，keyof 也可以用于操作类
变量名：keyof 属性名
class Person {name: string = "Semlinker";}//变量名：keyof 属性名let sname: keyof Person;sname = "name";
若把 sname = “name” 改为 sname = “age” 的话，编译器会提示以下错误信息：
Type '"age"' is not assignable to type '"name"'.
keyof 操作符除了支持接口和类之外，它也支持基本数据类型：
let K1: keyof boolean; // let K1: "valueOf"let K2: keyof number; // let K2: "toString" | "toFixed" | "toExponential" | ...let K3: keyof symbol; // let K1: "valueOf"
此外 keyof 也称为输入索引类型查询，与之相对应的是索引访问类型，也称为查找类型 。在语法上，它们看起来像属性或元素访问，但最终会被转换为类型：
type P1 = Person["name"];// stringtype P2 = Person["name" | "age"];// string | numbertype P3 = string["charAt"];// (pos: number) => stringtype P4 = string[]["push"];// (...items: string[]) => numbertype P5 = string[][0];// string
在中，操作符可以用来获取一个变量或对象的类型 。
interface Person {name: string;age: number;}const sem: Person = { name: "semlinker", age: 30 };type Sem = typeof sem; // type Sem = Person
在上面代码中，我们通过操作符获取 sem 变量的类型并赋值给 Sem 类型变量，之后我们就可以使用 Sem 类型：
const lolo: Sem= { name: "lolo", age: 5 }
你也可以对嵌套对象执行相同的操作：
const kakuqo = {name: "kakuqo",age: 30,address: {province: '福建',city: '厦门'}}type Kakuqo = typeof kakuqo;/*type Kakuqo = {name: string;age: number;address: {province: string;city: string;};}*/


上一篇：鼓浪屿旅游路线

下一篇：蚌埠五河;蚌埠五河一中分数线