What is the best way to construct an object in Typescript that includes only properties that are not null or undefined?

Question

What is the best way to construct an object in Typescript that includes only properties that are not null or undefined?

Below is a sample list of properties:

const firstProperty = this.checkSome(param) ? this.someArray[1] : null;
const secondProperty = this.anotherProperty ? this.anotherProperty.id : null;

I am looking to create an object using these properties:

myObject = {
  firstProperty,
  secondProperty,
};

While everything works as expected, the issue arises when myObject contains properties that are null or undefined. I want the created object to only include properties that have values and exclude any that do not. How can I achieve this in the shortest way possible? Keep in mind that there may be more than two properties, potentially up to a dozen.

typescript object

Answer 1

Answer №1

It seems like you are discussing an interface with optional properties. Let's delve into that concept.

interface CustomObject {
    propertyOne?: number
    propertyTwo?: string
}

Next, you can define a variable that utilizes this interface but does not include any optional properties:

const customObject: CustomObject = {}

Finally, you can conditionally assign values to these optional properties in the object:

 if (Math.random() > 0.5) customObject.propertyOne = 123
 if (Math.random() > 0.5) customObject.propertyTwo = "a specific value"

Interactive Demo

Answer 2

It seems like you are discussing an interface with optional properties. Let's delve into that concept.

interface CustomObject {
    propertyOne?: number
    propertyTwo?: string
}

Next, you can define a variable that utilizes this interface but does not include any optional properties:

const customObject: CustomObject = {}

Finally, you can conditionally assign values to these optional properties in the object:

 if (Math.random() > 0.5) customObject.propertyOne = 123
 if (Math.random() > 0.5) customObject.propertyTwo = "a specific value"

Interactive Demo

Answer 3

Answer №2

To eliminate unwanted properties from an object, you have a couple of options. One approach is to iterate through each property and remove it using the delete statement:

Object.keys(myObject).forEach(key => {
  if (obj[key] == null) {
    delete obj[key];
  }
})

Alternatively, you can utilize the reduce method to create a new object with only the desired properties:

const newObj = Object.entries(myObjec).reduce((prev, [key, value]) => {
    if (value != null) {
        prev[key] = value
    }
    return prev
}, {} as typeof myObjec)

Remember to include a type cast when creating the new object to maintain the same data structure.

For more information on this topic, check out these related questions:

Javascript - removing undefined fields from an object
Remove blank attributes from an Object in Javascript

Answer 4

To eliminate unwanted properties from an object, you have a couple of options. One approach is to iterate through each property and remove it using the delete statement:

Object.keys(myObject).forEach(key => {
  if (obj[key] == null) {
    delete obj[key];
  }
})

Alternatively, you can utilize the reduce method to create a new object with only the desired properties:

const newObj = Object.entries(myObjec).reduce((prev, [key, value]) => {
    if (value != null) {
        prev[key] = value
    }
    return prev
}, {} as typeof myObjec)

Remember to include a type cast when creating the new object to maintain the same data structure.

For more information on this topic, check out these related questions:

Javascript - removing undefined fields from an object
Remove blank attributes from an Object in Javascript

What is the best way to construct an object in Typescript that includes only properties that are not null or undefined?

Answer №1

Answer №2

Similar questions

IntelliSense in VSCode is unable to recognize the `exports` property within the package.json file

What is the proper way to refactor this TypeScript class?

Error message: TypeScript is unable to locate module "fs" after installation of @types/node package

Using a Typescript-specific type within a switch case statement

What is the best way to retrieve the names of "string" properties from an interface in TypeScript?

Attempting to populate an array with .map that commences with a designated number in Angular using Typescript

The module cannot be located: Unable to find '../typings' in '/vercel/path0/pages'

Having difficulties injecting a Service into a TypeScript Controller

Error encountered during Angular ahead-of-time (AOT) compilation: Internal state issue - Summaries cannot contain members in StaticSymbols

Is there a way to change a typescript callback into a promise?

Combining tuples with their corresponding data types

What is the best way to iterate through an object and display each item as <li></li> within another <li>?

Checking the next route in Angular 2 when navigating away

RTK Query - executing a query upon mounting with lazy loading enabled

The issue with Rxjs forkJoin not being triggered within an Angular Route Guard

Issue with linear Graham scan method causing failure when computing convex hull of basic polygon

Can you provide guidance on how to specifically specify the type for the generics in this TypeScript function?

Encountering an unsecured WebSocket connection when trying to access the Neo4J endpoint post deployment on Firebase

JavaScript or Query: Transforming an Object from an Associative Array

NodeJS and TypeScript collaborating to manage a limitless AWS S3 bucket in a blank state