深入理解 TypeScript Reflect Metadata
在定義類或者類方法的時候,可以設置一些元數(shù)據(jù),我們可以獲取到在類與類方法上添加的元數(shù)據(jù),用的方法就是 Reflect Metadata。元數(shù)據(jù)指的是描述東西時用的數(shù)據(jù)。
在 TypeScript 里使用 Reflect Metadata 需要做下面這樣的配置:
{ "compilerOptions": { "experimentalDecorators": true , "emitDecoratorMetadata": true }, }
然后在項目里安裝 reflect-metadata 這個包:
npm install reflect-metadata --save
然后做個實驗:
import 'reflect-metadata'; @Reflect.metadata('role', 'admin') class Post {} const metadata = Reflect.getMetadata('role', Post); console.log(metadata); // admin
先導入 reflect-metadata 這個包,然后在定義的 Post 類的上面用 Reflect.metadata 裝飾器添加了一條元數(shù)據(jù),role 是這條元數(shù)據(jù)的名字,admin 是我們給這條數(shù)據(jù)設置的對應的值。
稍后如果想獲取到在類上添加的這些元數(shù)據(jù),可以使用 Reflect.getMetadata 方法,role 是元數(shù)據(jù)的名字,Post 是對應的類的名字。執(zhí)行上面代碼,會返回 admin 這個字符串。
自定義裝飾器
在上面的例子里我們用了 Reflect.metadata 設置的元數(shù)據(jù)。我們也可以自定義一個裝飾器去完成同樣的事情。像下面這樣:
import 'reflect-metadata'; function Role(name: string): ClassDecorator { return target => { Reflect.defineMetadata('role', name, target); }; } @Role('admin') class Post {} const metadata = Reflect.getMetadata('role', Post); console.log(metadata);
Role 是自定義的一個裝飾器,接收一個 name 參數(shù),這是一個裝飾器工廠,返回的是 ClassDecorator。返回的東西應該是個適合在類上使用的裝飾器,所以接收一個 target 參數(shù),這個東西就是類的構(gòu)造方法。在方法里用 Reflect.defineMetadata 方法設置了一個自定義的元數(shù)據(jù)叫 role,對應的值是 name,也就是使用這個裝飾器的時候提供的參數(shù)值,第三個參數(shù)是 target,就是要添加元數(shù)據(jù)的那個類。
有了這個自定義的裝飾器,使用它的時候可以像這樣: @Role('admin'),功能就是在它裝飾的類的上面添加了一條叫 role 的元數(shù)據(jù),設置的對應的值是 admin。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
原生JS實現(xiàn)仿淘寶網(wǎng)左側(cè)商品分類菜單效果代碼
這篇文章主要介紹了原生JS實現(xiàn)仿淘寶網(wǎng)左側(cè)商品分類菜單效果代碼,可實現(xiàn)簡單的鼠標滑過tab切換的功能,非常簡單實用,需要的朋友可以參考下2015-09-09javascript實現(xiàn)數(shù)組去重的多種方法
這篇文章主要為大家詳細介紹了javascript實現(xiàn)數(shù)組去重的多種方法,感興趣的小伙伴們可以參考一下2016-03-03Js中FileReader讀取文件內(nèi)容方法詳解(async/await)
這篇文章主要給大家介紹了關(guān)于Js中FileReader讀取文件內(nèi)容(async/await)的相關(guān)資料,FileReader是前端進行文件處理的一個重要的Api,特別是在對圖片的處理上,如果你想知道圖片的處理原理,你就永遠不可能繞過它,需要的朋友可以參考下2023-11-11關(guān)于預加載InstantClick的問題解決方法
本篇文章主要介紹了關(guān)于預加載InstantClick的問題解決方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09