深入理解 TypeScript Reflect Metadata
在定義類或者類方法的時(shí)候,可以設(shè)置一些元數(shù)據(jù),我們可以獲取到在類與類方法上添加的元數(shù)據(jù),用的方法就是 Reflect Metadata。元數(shù)據(jù)指的是描述東西時(shí)用的數(shù)據(jù)。
在 TypeScript 里使用 Reflect Metadata 需要做下面這樣的配置:
{
"compilerOptions": {
"experimentalDecorators": true ,
"emitDecoratorMetadata": true
},
}
然后在項(xiàng)目里安裝 reflect-metadata 這個(gè)包:
npm install reflect-metadata --save
然后做個(gè)實(shí)驗(yàn):
import 'reflect-metadata';
@Reflect.metadata('role', 'admin')
class Post {}
const metadata = Reflect.getMetadata('role', Post);
console.log(metadata); // admin
先導(dǎo)入 reflect-metadata 這個(gè)包,然后在定義的 Post 類的上面用 Reflect.metadata 裝飾器添加了一條元數(shù)據(jù),role 是這條元數(shù)據(jù)的名字,admin 是我們給這條數(shù)據(jù)設(shè)置的對(duì)應(yīng)的值。
稍后如果想獲取到在類上添加的這些元數(shù)據(jù),可以使用 Reflect.getMetadata 方法,role 是元數(shù)據(jù)的名字,Post 是對(duì)應(yīng)的類的名字。執(zhí)行上面代碼,會(huì)返回 admin 這個(gè)字符串。
自定義裝飾器
在上面的例子里我們用了 Reflect.metadata 設(shè)置的元數(shù)據(jù)。我們也可以自定義一個(gè)裝飾器去完成同樣的事情。像下面這樣:
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 是自定義的一個(gè)裝飾器,接收一個(gè) name 參數(shù),這是一個(gè)裝飾器工廠,返回的是 ClassDecorator。返回的東西應(yīng)該是個(gè)適合在類上使用的裝飾器,所以接收一個(gè) target 參數(shù),這個(gè)東西就是類的構(gòu)造方法。在方法里用 Reflect.defineMetadata 方法設(shè)置了一個(gè)自定義的元數(shù)據(jù)叫 role,對(duì)應(yīng)的值是 name,也就是使用這個(gè)裝飾器的時(shí)候提供的參數(shù)值,第三個(gè)參數(shù)是 target,就是要添加元數(shù)據(jù)的那個(gè)類。
有了這個(gè)自定義的裝飾器,使用它的時(shí)候可以像這樣: @Role('admin'),功能就是在它裝飾的類的上面添加了一條叫 role 的元數(shù)據(jù),設(shè)置的對(duì)應(yīng)的值是 admin。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js 獲取經(jīng)緯度的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js 獲取經(jīng)緯度的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
javascript Canvas動(dòng)態(tài)粒子連線
這篇文章主要為大家詳細(xì)介紹了javascript Canvas動(dòng)態(tài)粒子連線,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01
javaScript中push函數(shù)用法實(shí)例分析
這篇文章主要介紹了javaScript中push函數(shù)用法,較為詳細(xì)的分析了javascript中push函數(shù)的功能、定義及使用技巧,需要的朋友可以參考下2015-06-06
uniapp如何編寫(xiě)含有后端的登錄注冊(cè)頁(yè)面
uniapp是一個(gè)使用html5標(biāo)準(zhǔn)的,一次開(kāi)發(fā),可以發(fā)布到安卓,ios,小程序的多端框架,非常方便,下面這篇文章主要給大家介紹了關(guān)于uniapp如何編寫(xiě)含有后端的登錄注冊(cè)頁(yè)面的相關(guān)資料,需要的朋友可以參考下2023-05-05
js 數(shù)組當(dāng)前行添加數(shù)據(jù)方法詳解
這篇文章主要介紹了js 數(shù)組當(dāng)前行添加數(shù)據(jù)方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
微信小程序授權(quán)獲取用戶詳細(xì)信息openid的實(shí)例詳解
這篇文章主要介紹了微信小程序授權(quán)獲取用戶詳細(xì)信息openid的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-09-09

