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

概述

在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) // descriconsole.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: numberconstructor(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编译器会抛出错误