When utilizing the Angular 2 Stack, the Typescript Reflect.getMetadata('design:type'...) method may return an Object instead of a Date

Question

When utilizing the Angular 2 Stack, the Typescript Reflect.getMetadata('design:type'...) method may return an Object instead of a Date

When running the code sample below, it outputs "[Function: Date]", which is as expected.

import 'reflect-metadata'
function logType(target : any, key : string) {
     var t = Reflect.getMetadata("design:type", target, key);
     console.log(`${key} type: ${t.name}`);
   }
export class Demo {
  @logType // apply property decorator
  test: Date;
}
let demo = new Demo();
console.log(Reflect.getMetadata('design:type', demo, "test"));

However, when I incorporate this same code into an Angular 2 Project, it returns "function Object() { [native code] }" instead.

I have created a Plunker to demonstrate this: https://plnkr.co/edit/DhXT89U0q5fCOWlCrx6w?p=preview

Despite this issue, Reflect.getMetadata('design:type' ...) still functions correctly with custom classes and other builtin classes. The problem only arises with Date objects.

Can you help identify what mistake I am making?

angular typescript reflect-metadata

Answer 1

Answer №1

Make sure to properly execute the function, don't just leave it hanging there :), remember to include parentheses after @logType

export class Demo {
  @logType() // don't forget to add parentheses 
  test: Date;
}

Alternatively, you need to update your @logType function to something similar to this:

function logType(type: any) {
  return function(target: any, propertyKey: string) {  
     Reflect.defineMetadata('design:type', type, target, propertyKey);
  }
}

This is how you can use it:

export class Demo {
  @logType(Date) // apply property decorator
  test: Date;
}

I have made changes in the plnkr to demonstrate what I am talking about: plnkr

The default types you can get are either string, boolean, number, or object. The built-in types like Date, Array, or even custom classes like Math and WeakMap will all evaluate to Object. This might be a bug or intentional design.

If you want to get custom classes using your method, you can do something like this:

export class Demo {
  @logType
  test: Demo;
}

It will display Demo in the output.

Answer 2

Make sure to properly execute the function, don't just leave it hanging there :), remember to include parentheses after @logType

export class Demo {
  @logType() // don't forget to add parentheses 
  test: Date;
}

Alternatively, you need to update your @logType function to something similar to this:

function logType(type: any) {
  return function(target: any, propertyKey: string) {  
     Reflect.defineMetadata('design:type', type, target, propertyKey);
  }
}

This is how you can use it:

export class Demo {
  @logType(Date) // apply property decorator
  test: Date;
}

I have made changes in the plnkr to demonstrate what I am talking about: plnkr

The default types you can get are either string, boolean, number, or object. The built-in types like Date, Array, or even custom classes like Math and WeakMap will all evaluate to Object. This might be a bug or intentional design.

If you want to get custom classes using your method, you can do something like this:

export class Demo {
  @logType
  test: Demo;
}

It will display Demo in the output.

When utilizing the Angular 2 Stack, the Typescript Reflect.getMetadata('design:type'...) method may return an Object instead of a Date

Answer №1

Similar questions

Transmitting language codes from Wordpress Polylang to Angular applications

What is the reason TypeScript does not display an error when assigning a primitive string to an object String?

Exploring Angular Testing with SpyOn

Similar to `util.inspect` in Node.js, Deno also has a function

Guide on integrating a personalized theme into your Ionic 5 app

Angular: The metadata version does not match for the module located in src/app/app.module.ts. A version of 3 was found when version

Send information to the main application component

Guide to incorporating Angular 2 code into your Rails application

The connection named "Default" could not be located for use with TypeOrm and Express

An error has occurred while attempting to differentiate '[object Object]'. In Angular, only arrays and iterables are permitted for this operation

Deactivate multiple input fields by utilizing various radio buttons

Using conditional data binding in Angular 2 allows for dynamic rendering based

Unable to locate the JSON file in the req.body after sending it through an HTTP post request

Angst with the Angular Command Line Interface

Guide to iterating through different endpoints in a predetermined sequence

Implementing the breadcrumb component within dynamically loaded modules loaded through the router-outlet component

Why is my Angular2 *ngFor not showing the contents of my array?

How can one properly extend the Object class in JavaScript?

What causes a typed string literal to be recognized as a pure string in TypeScript?

Enhance your material-ui component using TypeScript functionality