TypeScriptのダークサイド-@ Exampleデコレータ

TypeScriptでは、「フィールド」という用語は一般的に使用されず、フィールドはプロパティとも呼ばれます 。 これにより、多くの混乱が生じます。 違いがあります。 get / setアクセスメソッドでプロパティを宣言すると、Object.definePropertyの呼び出しがクラス宣言に表示され、記述子がデコレータで使用可能になり、フィールドを（C＃とJavaの観点から）単に宣言すると、 何も表示されず、したがって、記述子は表示されませんデコレータに渡されます。 これにより、デコレータのシグネチャが定義されるため、「フィールド」という用語を使用して、アクセスメソッドを持つプロパティと区別します。

 { "compilerOptions": { "target": "ES5", "experimentalDecorators": true } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 { "compilerOptions": { "target": "ES5", "experimentalDecorators": true, "emitDecoratorMetadata": true } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 function safe(target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor<any>): TypedPropertyDescriptor<any> { //    var originalMethod = descriptor.value; //      descriptor.value = function SafeWrapper () { try { //    originalMethod.apply(this, arguments); } catch(ex) { //    ,     console.error(ex); } }; //   return descriptor; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 function OnChange<ClassT, T>(callback: (ClassT, T) => void): any { return (target: Object, propertyKey: string | symbol) => { //    ,   . //        . var descriptor = Object.getOwnPropertyDescriptor(target, propertyKey) || {configurable: true, enumerable: true}; //    get  set var value: T; var originalGet = descriptor.get || (() => value); var originalSet = descriptor.set || (val => value = val); descriptor.get = originalGet; descriptor.set = function(newVal: T) { // ,   set  function, //  this -   , //   ,  this - Window!!! var currentVal = originalGet.call(this); if (newVal != currentVal) { //    callback    callback.call(target.constructor, this, newVal); } originalSet.call(this, newVal); }; //   ,    Object.defineProperty(target, propertyKey, descriptor); return descriptor; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

definePropertyを呼び出し、デコレータからハンドルを返すことに注意してください。 これは、フィールドデコレータの戻り値が無視される、 reflect-metadataのバグが原因です。

 //   function Inject(target: Object, propKey: string): any { //     // (       ILogService) var propType = Reflect.getMetadata("design:type", target, propKey); //    var descriptor = { get: function () { // this -    var serviceLocator = this.serviceLocator || globalSericeLocator; return serviceLocator.getService(propType); } }; Object.defineProperty(target, propKey, descriptor); return descriptor; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

definePropertyを呼び出し、デコレータからハンドルを返すことに注意してください。 これは、フィールドデコレータの戻り値が無視される、 reflect-metadataのバグが原因です。

 class ServiceLocator { services: [{interfaceType: Function, instance: Object }] = [] as any; registerService(interfaceType: Function, instance: Object) { var record = this.services.find(x => x.interfaceType == interfaceType); if (!record) { record = { interfaceType: interfaceType, instance: instance}; this.services.push(record); } else { record.instance = instance; } } getService(interfaceType: Function) { return this.services.find(x => x.interfaceType == interfaceType).instance; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 //      const JsonNameMetadataKey = "Habrahabr_PFight77_JsonName"; //  function JsonName(name: string) { return (target: Object, propertyKey: string) => { //     name Reflect.defineMetadata(JsonNameMetadataKey, name, target, propertyKey); } } // ,      function serialize(model: Object): string { var result = {}; var target = Object.getPrototypeOf(model); for(var prop in model) { //     var jsonName = Reflect.getMetadata(JsonNameMetadataKey, target, prop) || prop; result[jsonName] = model[prop]; } return JSON.stringify(result); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

@ServerModelField-デコレータのサーバーモデルコンバーター

問題のステートメントは次のとおりです。 このタイプのいくつかのJSONデータがサーバーから到着します（同様のJSONが1つのBaaSサービスを送信します）。

 { "username":"PFight77", "email":"test@gmail.com", "doc": { "info":"The author of the article" } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このデータを型付きオブジェクトに変換し、いくつかのフィールドの名前を変更します。 最終的に、すべては次のようになります。

 class UserAdditionalInfo { @ServerModelField("info") public mRole: string; } class UserInfo { @ServerModelField("username") private mUserName: string; @ServerModelField("email") private mEmail: string; @ServerModelField("doc") private mAdditionalInfo: UserAdditionalInfo; public get DisplayName() { return mUserName + " " + mAdditionalInfo.mRole; } public get ID() { return mEmail; } public static parse(jsonData: string): UserInfo { return convertFromServer(JSON.parse(jsonData), UserInfo); } public serialize(): string { var serverData = convertToServer(this); return JSON.stringify(serverData); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これがどのように実装されているか見てみましょう。

最初に、文字列パラメーターを取得してメタデータに保存するServerModelField フィールドデコレーターを定義する必要があります。 さらに、JSONを解析するために、デコレータを持つフィールドが一般的にクラスにあることを知る必要があります。 これを行うには、クラスのすべてのフィールドに共通のメタデータの別のインスタンスを宣言します。このインスタンスには、装飾されたすべてのメンバーの名前が保存されます。 ここでは、Relect.defineMetadataを介してメタデータを保存するだけでなく、Reflect.getMetadataを介して受信します。

 //   ,       const ServerNameMetadataKey = "Habrahabr_PFight77_ServerName"; const AvailableFieldsMetadataKey = "Habrahabr_PFight77_AvailableFields"; //   export function ServerModelField(name?: string) { return (target: Object, propertyKey: string) => { //     name,    ,     Reflect.defineMetadata(ServerNameMetadataKey, name || propertyKey, target, propertyKey); // ,     availableFields    var availableFields = Reflect.getMetadata(AvailableFieldsMetadataKey, target); if (!availableFields) { // Ok,  ,     availableFields = []; //   4- (propertyKey)  defineMetadata, // ..      Reflect.defineMetadata(AvailableFieldsMetadataKey, availableFields, target); } //      availableFields.push(propertyKey); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さて、関数convertFromServerを書くことは残っています。 特別なことはほとんどありません。Reflect.getMetadataを呼び出し、受信したメタデータを使用してJSONを解析します。 1つの機能-この関数は、newを介してUserInfoのインスタンスを作成する必要があるため、JSONデータに加えてクラス： convertFromServer(JSON.parse(data), UserInfo)



ます。 これがどのように機能するかを理解するには、以下のネタバレをご覧ください。

 class MyClass { } //    "   " var myType: { new(): any; }; //     myType = MyClass; //  new MyClass() var obj = new myType();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2番目の機能は、tsconfig.jsonで「emitDecoratorMetadata」：trueを設定することにより生成されるフィールドタイプデータの使用です。 レセプションは、キー「design：type」をReflect.getMetadata



してReflect.getMetadata



を呼び出すことで構成され、対応するタイプのコンストラクターを返します。 たとえば、 Reflect.getMetadata("design:type", target, "mAdditionalInfo")



をUserAdditionalInfo



と、 UserAdditionalInfo



コンストラクターが返されます。 カスタムタイプフィールドを適切に処理するために、この情報を使用します。 たとえば、UserAdditionalInfoクラスは@ServerModelFieldデコレーターも使用するため、このメタデータを使用してJSONを解析する必要もあります。

3番目の機能は、メタデータを取得する適切なターゲットを取得することです。 フィールドデコレータを使用しているため、クラスプロトタイプからメタデータを取得する必要があります。 静的メンバーデコレータの場合、クラスコンストラクターを使用する必要があります。 プロトタイプを取得するには、 Object.getPrototypeOfを呼び出すか、コンストラクターのプロトタイププロパティにアクセスします。

コード内の他のすべてのコメント：

 export function convertFromServer<T>(serverObj: Object, type: { new(): T ;} ): T { //  ,   ,    type var clientObj: T = new type(); //     var target = Object.getPrototypeOf(clientObj); //   ,       var availableNames = Reflect.getMetadata(AvailableFieldsMetadataKey, target) as [string]; if (availableNames) { //    availableNames.forEach(propName => { //       JSON var serverName = Reflect.getMetadata(ServerNameMetadataKey, target, propName); if (serverName) { //  ,   var serverVal = serverObj[serverName]; if (serverVal) { var clientVal = null; // ,       @ServerModelField //    var propType = Reflect.getMetadata("design:type", target, propName); // ,         var propTypeServerFields = Reflect.getMetadata(AvailableFieldsMetadataKey, propType.prototype) as [string]; if (propTypeServerFields) { // ,    ,    clientVal = convertFromServer(serverVal, propType); } else { // ,    clientVal = serverVal; } //      clientObj[propName] = clientVal; } } }); } else { errorNoPropertiesFound(getTypeName(type)); } return clientObj; } function errorNoPropertiesFound<T>(typeName: string) { throw new Error("There is no @ServerModelField directives in type '" + typeName + "'. Nothing to convert."); } function getTypeName<T>(type: { new(): T ;}) { return parseTypeName(type.toString()); } function parseTypeName(ctorStr: string) { var matches = ctorStr.match(/\w+/g); if (matches.length > 1) { return matches[1]; } else { return "<can not determine type name>"; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

逆関数convertToServerにも同様の形式があります。

 function convertToServer<T>(clientObj: T): Object { var serverObj = {}; var target = Object.getPrototypeOf(clientObj); var availableNames = Reflect.getMetadata(AvailableFieldsMetadataKey, target) as [string]; availableNames.forEach(propName=> { var serverName = Reflect.getMetadata(ServerNameMetadataKey, target, propName); if (serverName) { var clientVal = clientObj[propName]; if (clientVal) { var serverVal = null; var propType = Reflect.getMetadata("design:type", target, propName); var propTypeServerFields = Reflect.getMetadata(AvailableFieldsMetadataKey, propType.prototype) as [string]; if (clientVal && propTypeServerFields) { serverVal = convertToServer(clientVal); } else { serverVal = clientVal; } serverObj[serverName] = serverVal; } } }); if (!availableNames) { errorNoPropertiesFound(parseTypeName(clientObj.constructor.toString())); } return serverObj; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 var ControllerNameMetadataKey = "Habr_PFight77_ControllerName"; //  . //  ,     //   (  ), //      . function Controller(name: string) { return (target: Function) { Reflect.defineMetadata(ControllerNameMetadataKey, name, target.prototype); }; } //  ,    function Action(target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor<any>): TypedPropertyDescriptor<any> { //    var originalMethod = descriptor.value; //      descriptor.value = function ActionWrapper () { //  url,   Controller var controllerName = Reflect.getMetadata(ControllerNameMetadataKey, target); //  url  /ControllerName/ActionName var url = "/" + controllerName + "/" + propertyKey; //  url   [].push.call(arguments, url); //       originalMethod.apply(this, arguments); }; //   return descriptor; } // ,    function post(data: any, args: IArguments): any { //  url,   @Action var url = args[args.length - 1]; return $.ajax({ url: url, data: data, method: "POST" }); }