Typescript高级: 深入理解 keyof, extends 以及 extends keyof

关注

原创 2024-05-12 23:05:52 2.3k 阅读 AI 写同款· GEO 优化 ›

TypeScript & 高级语法 & 详细解释 in、keyof、extends、索引签名、Record、typeof 的含义（不定时更新）很早就听过 TypeScript，当时自己试了下觉得挺简单的，就是给数据声明一个类型提高可读和维护性，不过当时 TS 还不盛行，项目也没机会用到就一直落着，随着 TS 不断普及，许多项目都开始引入了 TS，这不最近在 github 看到一些 TS 代码后，心里开始吐槽：这好好的非要给 JS 装饰的这么花里胡哨的？我都认不出来这是什么语言了，你确定这是提升 JS 语言可读性而不是添乱？有同学跟我一样的请举个手！后来静下心来想了想，既来之则安之，与其吐槽，不如静下心来好好重温下 TS ，在这期间也提取了一些有阅读详情

概述

在TypeScript的世界中，extends和keyof是两个强大的工具
它们分别用于约束类型和获取对象类型的键
当这两者结合使用时，我们可以创建出更为复杂和精细的类型操作
从而增强TypeScript的类型安全性

keyof

keyof 用于获取一个对象类型的所有键，并生成一个新的字符串字面量类型

type Person = {
    name: string;
    age: number;
    address: {
      city: string;
      state: string;
    };
  };
  
type PersonKeys = keyof Person; // "name" | "age" | "address"

const a: PersonKeys = "name" // 正确
const b: PersonKeys = "age" // 正确
const c: PersonKeys = "address" // 正确
// const d: PersonKeys = "xxxx" // 编译就错误

console.log(a) // name
console.log(b) // age
console.log(c) // address

在上面的代码中，PersonKeys是一个由Person对象的所有键组成的联合类型

const obj = { address: "aaaaaaa", phone: 153111111, descri: "bbbbbb" }
console.log(typeof obj) // object

// 1 ) 单个的 keyof 测试
type myobjtype = typeof obj // 这里 typeof obj 是 object, 所以 myobjtype 就是 object
type keyofobj = keyof myobjtype // "address" | "phone" | "descri"
const a:keyofobj = "address"
const b:keyofobj = "phone"
const c:keyofobj = "descri"
console.log(a) // address
console.log(b) // phone
console.log(c) // descri

console.log("----------------------")

// 2 ) 组合 keyof 和 typeof 效果同上
type keyofobjtype = keyof typeof obj;
const d: keyofobjtype = "address"
const e: keyofobjtype = "phone"
const f: keyofobjtype = "descri"
console.log(d) // address
console.log(e) // phone
console.log(f) // descri

// 3 ) 定义 type 与 获取type
type testType = { username: string, age: number }
type ageType = testType["age"]
type nameType = testType["username"]
const g : ageType = 1 // 数值
const h: nameType = "abc"
console.log(g) // 1
console.log(h) // abc

// 4 ）定义 inteface 和 结合 keyof使用interface
interface objType { username: string, age: number }
const i: objType = { username: "博鳌", age: 1111 }
type xxType = keyof objType
const j: xxType = "username"
const k: xxType = "age"
console.log(j) // username
console.log(k) // age
type yType = objType["age"]
const l:yType = 11
console.log(l) // 11

keyof 对于类的使用

class Order {
    static count: number
    constructor(
        public orderId: number, 
        public date: Date,
        public custname: string,
        public phone: string
    ) {}
    doEat() {}
}

type keyofOrders = keyof Order // "orderId" | "date" | "custname" | "phone" | "doEat"
const a: keyofOrders = "orderId"
const b: keyofOrders = "date"
const c: keyofOrders = "custname"
const d: keyofOrders = "phone"
const e: keyofOrders = "doEat"
console.log(a) // orderId
console.log(b) // date
console.log(c) // custname
console.log(d) // phone
console.log(e) // doEat

extends 约束

extends关键字在TypeScript中通常用于类型约束
确保一个类型符合特定的条件或结构

例如，在泛型中，我们可以使用extends来限制类型参数的范围

function printLength<T extends { length: number }>(obj: T): void {
    console.log(obj.length);
}

printLength({ length: 10, value: "Hello" }); // 10 这里正常编译
// printLength({ value: "Hello" }); // Error: Object literal may only specify known properties, and 'value' does not exist in type '{ length: number; }'.

上述定义了一个 printLength ，参数是 obj, 参数类型是 T, 返回值是 void
对于参数类型T来说，需要符合一种类型，简单来说就是继承 length: number 这个对象
而下面传入的参数中不符合参数要继承 length: number 的这一约束
我们确保传递给该函数的任何对象都必须具有一个名为length的数字类型属性

高级应用

class Container<T extends object> {
  t!: T;
  constructor(t_: T) {
    this.t = t_;
  }
  show(): T {
    console.log(this.t);
    return this.t;
  }
}

const obj2: object = { username: "lisi", age: 23 }
const c = new Container<object>(obj2) // object可以具体化T extends object,T就是object类型
c.show();

type objtype = { username: string, age: number }
const obj: objtype = { username: "wangwu", age: 23 }
// obj as object // 类型断言
const obj3 = <object>obj;//类型转换
const c2 = new Container<objtype>(obj) // objtype可以具体化T extends object,具体化后T就是objtype类型
c2.show();

class Customer {
  // js function Customer(){} new Object()
  constructor(public name: string) {}
}
const cust = new Customer("wangwu");
const c3 = new Container<Customer>(cust)
c3.show();

这里使用了 T extends object 来定义泛型 Container 类，这个类用于包装任意对象类型的值
总的来说，这里展示了如何使用泛型类来包装不同类型的对象，并通过具体的类型约束来增强类型的具体性
然而，在实际应用中，直接使用 T 作为泛型约束（而不是 T extends object）通常更为常见，除非你有特定的理由需要对 T 进行额外的约束
同时，object 类型通常用于那些确实需要任意对象类型而不仅仅是对象字面量的情况

extends keyof 结合使用

当extends和keyof结合使用时，我们可以创建一个类型
该类型确保某个键存在于给定的对象类型中
这通常在类型安全和映射类型中非常有用
以下是一个使用extends keyof的例子，它定义了一个函数

该函数接受一个对象和一个该对象的键，并返回该键对应的值类型：

type ValueOfType<T, K extends keyof T> = T[K];

function getValue<T, K extends keyof T>(obj: T, key: K): ValueOfType<T, K> {
  return obj[key];
}

const person = {
  name: "Alice",
  age: 30,
};

const nameValue: string = getValue(person, "name"); // Alice
const ageValue: number = getValue(person, "age"); // 30
console.log(nameValue)
console.log(ageValue)
// const invalidValue: string = getValue(person, "invalidKey"); // Error: Argument of type '"invalidKey"' is not assignable to parameter of type '"name" | "age"'.

在这个例子中，ValueOfType是一个泛型类型，它接受两个类型参数：T和K
- K通过extends keyof T约束，确保它必须是T对象的键之一
- ValueOfType<T, K>返回T[K]，即对象T中键为K的属性的类型
getValue函数使用ValueOfType来确保返回值的类型与提供的键匹配
这里，getValue<T, K extends keyof T> 中
- 后面一半的泛型 <T, K extends keyof T>
- 用于描述这个函数，可以理解为函数的描述
后面就是具体的应用示例了
最后如果尝试使用不存在的键调用getValue，TypeScript编译器会抛出错误