Typescript高级: 深入理解 keyof 和 extends keyof

本文主要是介绍Typescript高级: 深入理解 keyof 和 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的数字类型属性

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编译器会抛出错误