概要
本文主要分享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的取值。
结论
通过泛型约束,我们可以很好的消除代码中的潜在隐患,避免内存泄漏。