概要
本文主要分享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的取值。
結論
通過泛型約束,我們可以很好的消除代碼中的潛在隱患,避免內存泄漏。