Typescript中的泛型约束extends keyof

概要

本文主要分享Typescript中泛型约束的使用方法。在开发过程中，通过使用该方法，可以在编译阶段，帮助我们查找到一些潜在的空值引用错误。

代码和实现

我们预先定义了IUser接口，接口包括了id，姓名，性别和婚否的基本信息。

enum  Gender {Male=1,Female
}interface IUser {id:number;name:string;gender:Gender;married:boolean;
}const user = {id:1,name:"ABC",gender:Gender.Female,married:true} as IUser;

错误的用法

下面定义一个函数，实现根据传入的key，获取user对象的基本信息。

function getUserProperty(user:any, key:string){return user[key];}
getUserProperty(user, "id")

调用过程没有任何问题，但是如果写一个不存在的key，如下：

getUserProperty(user, "idd")

这样取出的变成了空值，但是程序没有任何报错，非常不便于查找问题。

正确的用法

function getUserProperty<T, K extends keyof T>(user:T, key: K):T[K]{return user[key];
}
getUserProperty<IUser, keyof IUser>(user, "name")

上面的例子中，我们通过keyof约束了key的取值，key必须是泛型T中已经存在的key，相当于key只能取id，name， gender， married中的一个。如果写的一个不存在的key，在编译阶段就会报错提醒。

例如我们将代码修改如下：

getUserProperty<IUser, keyof IUser>(user, "namee") 

代码直接报错：

会直接提醒，key值不对。

基本原理讨论

keyof的基本原理和const关键字的实现方式类似，将数值转换为类型，修改数值，即为修改类型，从而达到只读的效果。

keyof通过获取IUser的联合键值，然后将每个键值，如果id， name，也都当作一种类型，从而限制了key的取值。

结论

通过泛型约束，我们可以很好的消除代码中的潜在隐患，避免内存泄漏。