前言
typeof
与keyof
是 TypeScript 中常见的两个操作符;- 注意 :
- 要区分
JavaScript
和TypeScript
中的typeof
;
- 要区分
一、typeof
-
作用 :
- 用于 获取 变量 的 类型;
- 因此操作符后面跟的始终是一个变量;
-
基本用法 :
- 现在有一个变量(可以是基本数据类型,也可以是引用数据类型等等)
tsconst obj = { a: 1, b: '2', c: [1, 2], d: { x: 4 }, e: () => 'Hello TypeScript!' } type objType = typeof obj; // 得到的类型 objType 就是下面这样 type objType = { a: number; b: string; c: number[]; d: { x: number; }; e: () => string; }
-
使用 typeof 给 组件添加类型 :
- 我们在封装组件的时候,会给组件添加类型,此时就可以使用
typeof
操作符获取组件的类型; - 假如我们在
conponents
文件夹下定义了一个CpNavBar.vue
的组件,我们如何给这个组件添加类型呢? - 目标文件:
src/types/components.d.ts
tsimport CpNabBar from '@/views/components/CpNavBar.vue'; declare model 'vue' { interface GlobalComponents { CpNavBar: typeof CpNavBar; } }
- 我们在封装组件的时候,会给组件添加类型,此时就可以使用
二、keyof
- 作用 :
keyof
后面跟一个类型,返回 由该类型 的 所有字段 组成的 字面量 联合 类型;keyof
从 对象类型 中取出key
的 字面量联合类型;
- 代码展示:
- 我们在向后端发送数据的时候需要做非空校验,有些场景下,发送数据的字段和后端返回数据的字段是一样的,字段又比较多的时候(并不是全部字段),我们可以可以使用数组的
every
方法做判断,但是,前提是需要准备一个相关字段的数组;- 声明这个数组有两种方法:
- 不给此数组设置类型:直接去找对应的字段,一个一个复制粘贴;
- 给此数组设置类型:直接用提示加回车即可快速实现;
- 给此数组设置类型:
- 因为发送请求的字段和后端返回数据的字段一样,我们可以直接根据返回数据的类型得到该数组的类型,此处就会使用到
keyof
关键字;
- 因为发送请求的字段和后端返回数据的字段一样,我们可以直接根据返回数据的类型得到该数组的类型,此处就会使用到
- 声明这个数组有两种方法:
- 我们在向后端发送数据的时候需要做非空校验,有些场景下,发送数据的字段和后端返回数据的字段是一样的,字段又比较多的时候(并不是全部字段),我们可以可以使用数组的
ts
// eg: 声明的后端返回数据的类型
type GoodsInfo = {
goods_id: string;
goods_price: number;
goods_count: number;
goods_url: string[];
};
// 根据现有类型得到字段数组的类型
type GoodsKeys = keyof GoodsInfo;
// 得到的类型
// type GoodsKeys = 'goods_id' | 'goods_price' | 'goods_count' | 'goods_url';