Discovering the property type of an object within Angular

Question

Discovering the property type of an object within Angular

I am currently studying Angular 6

export class myClass{
  xValue: number;
  yValue: number;
  xDate: Date;
  yDate: Date;
  xName?: string;
  yName?: string;
}

Within my codebase, I am required to verify the properties with a number data type.

let obj: MyClass;
obj.xValue=1;
obj.yValue=null;
obj.xDate= new Date();
obj.yDate= null;
obj.xName= "test";
obj.yName= null;

    for (var key in obj) {
      if ((obj[key] == null) && (typeof obj[key] === "number"))
        obj[key] = -1;
}

typeof obj["yValue"] value is null and typeof "yValue" is string, while I need to return the type of property number. Same for instanceof

How can I determine the primitive type of a property within an object?

typescript angular6 typeof

Answer 1

Answer №1

In the world of web development, TypeScript is transformed into JavaScript for execution in the browser. JavaScript itself is known as a dynamically typed language where the type of a variable can vary during runtime, as shown below:

let a = null;
console.log(typeof a);

a = 5;
console.log(typeof a);

a = 'hello';
console.log(typeof a);

Your specific scenario presents a condition that will never be met since if obj[key] holds a value of null, then it cannot simultaneously hold a type of number:

if ((obj[key] == null) && (typeof obj[key] === "number"))

To address this issue, one approach is to use property initializers to set default values for your class fields and create a function that compares those fields against the default values specified when constructing an object of your class:

function setDefaultValues(obj, defaultValues, valueToCheck) {
  for (const prop in obj) {
    if (defaultValues[prop] === valueToCheck && obj[prop] === null) {
      obj[prop] = valueToCheck;
    }
  }
}

class A {
  x = -1; // default value
  y = -1; // default value
  z = 'hello';
}

const a = new A();
a.y = null; // later replaced by -1
console.log(a);

setDefaultValues(a, new A(), -1); // check all -1 fields on `new A()`, if null on `a`, then set to -1
console.log(a);

Answer 2

In the world of web development, TypeScript is transformed into JavaScript for execution in the browser. JavaScript itself is known as a dynamically typed language where the type of a variable can vary during runtime, as shown below:

let a = null;
console.log(typeof a);

a = 5;
console.log(typeof a);

a = 'hello';
console.log(typeof a);

Your specific scenario presents a condition that will never be met since if obj[key] holds a value of null, then it cannot simultaneously hold a type of number:

if ((obj[key] == null) && (typeof obj[key] === "number"))

To address this issue, one approach is to use property initializers to set default values for your class fields and create a function that compares those fields against the default values specified when constructing an object of your class:

function setDefaultValues(obj, defaultValues, valueToCheck) {
  for (const prop in obj) {
    if (defaultValues[prop] === valueToCheck && obj[prop] === null) {
      obj[prop] = valueToCheck;
    }
  }
}

class A {
  x = -1; // default value
  y = -1; // default value
  z = 'hello';
}

const a = new A();
a.y = null; // later replaced by -1
console.log(a);

setDefaultValues(a, new A(), -1); // check all -1 fields on `new A()`, if null on `a`, then set to -1
console.log(a);

Discovering the property type of an object within Angular

Answer №1

Similar questions

What is the best way to insert an item into a tree structure when determining the appropriate level for insertion is necessary beforehand?

Navigating the enum data model alongside other data model types in Typescript: Tips and Tricks

Setting a blank value or null equivalent to a field: Tips and tricks

Exploring Angular 2 Tabs: Navigating Through Child Components

The TypeScript compilation is missing Carousel.d.ts file. To resolve this issue, ensure that it is included in your tsconfig either through the 'files' or 'include' property

Angular POST sends null to .NET Core API

Steps for importing jQuery typings into TypeScript:1. First, install the jQuery

Having difficulty reaching the specified route ID in Angular app

Encountering deployment problems with React and TypeScript involving router on Github Pages

JavaScript or Python code to create unique alphanumeric strings automatically

Constructor not executing when using Object.create

Include an external JavaScript file within a component to display pictures in a web browser using Angular 2

Is there a way to retrieve the groups of match/matchAll similar to accessing an array?

Issue with editing images on the Angular front-end platform

Is there a way to turn off tsc pretty printing using the configuration file?

Locate and refine the pipeline for converting all elements of an array into JSON format using Angular 2

A comprehensive method in JavaScript to determine if a variable is defined

Unable to retrieve property values from an array containing objects

Replicating an array of typed objects in Angular2

Validating a field conditionally upon submission