前端 - 笔记 - 【TypeScript】 - 【typeof操作符 与 keyof操作符】

前言

• typeof 与 keyof 是 TypeScript 中常见的两个操作符；
• 注意 ：
  • 要区分 JavaScript 和 TypeScript 中的 typeof；

一、typeof

• 作用 ：

  • 用于 获取 变量 的 类型；
  • 因此操作符后面跟的始终是一个变量；

• 基本用法 ：

  • 现在有一个变量（可以是基本数据类型，也可以是引用数据类型等等）

  const 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

  import CpNabBar from '@/views/components/CpNavBar.vue';
  
  declare model 'vue' {
      interface GlobalComponents {
          CpNavBar: typeof CpNavBar;
      }
  }

二、keyof

• 作用 ：
  • keyof 后面跟一个类型，返回 由该类型 的 所有字段 组成的 字面量 联合 类型；
  • keyof 从 对象类型 中取出 key 的 字面量联合类型；
• 代码展示：
  • 我们在向后端发送数据的时候需要做非空校验，有些场景下，发送数据的字段和后端返回数据的字段是一样的，字段又比较多的时候（并不是全部字段），我们可以可以使用数组的every方法做判断，但是，前提是需要准备一个相关字段的数组；

    • 声明这个数组有两种方法：
      1. 不给此数组设置类型：直接去找对应的字段，一个一个复制粘贴；
      2. 给此数组设置类型：直接用提示加回车即可快速实现；
    • 给此数组设置类型：
      • 因为发送请求的字段和后端返回数据的字段一样，我们可以直接根据返回数据的类型得到该数组的类型，此处就会使用到 keyof 关键字；

// 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';