本文主要是介绍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编译器会抛出错误
总结
- 通过结合使用extends和keyof,可以在TS中创建更为精细和安全的类型操作
- 这种组合使我们能够确保类型参数的键存在于对象中,并据此推断出相应值的类型
- 这不仅增强了代码的类型安全性,还提高了代码的可读性和可维护性
这篇关于Typescript高级: 深入理解 keyof, extends 以及 extends keyof的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!