Experience the crash-free, efficient accessor shorthand in Angular 8 with Native Typescript integration

Question

Experience the crash-free, efficient accessor shorthand in Angular 8 with Native Typescript integration

Question about Angular 8:

In the past, I used

object['accessor']['accessor']['accessor']

as a quick workaround in TypeScript to access nested properties safely without risking an error if one of the children was empty.

What is the recommended approach now according to ECMAScript standards within a TypeScript file?

EDIT : While exploring options, I came across this article on optional chaining in TypeScript: https://medium.com/inside-rimeto/optional-chaining-in-typescript-622c3121f99b

The use of nested ternary expressions seems promising, but it appears quite complex.

EDIT 2: Disregard my previous findings as it led to irrecoverable crashes at the component level. It seems that newer Angular guidelines are stricter, and they have not provided a clear alternative yet.

angular typescript ecmascript-2017

Answer 1

Answer №1

I lean towards using boolean expressions.

let object = {
  accessor: {
    accessor: {
      accessor: "test"
    }
  }
}

if (object
   && object.accessor
   && object.accessor.accessor
   && object.accessor.accessor.accessor) {
  console.log(object.accessor.accessor.accessor);
} else {
  console.log(null);
}

If you're not concerned about compile time error checking, you could implement a solution like this. However, I would advise against it.

function tryGetValue(obj, propertiesPath) {
  if (!obj) {
    return null;
  }

  if (!propertiesPath) {
    return obj;
  }

  let current = obj;
  let properties = propertiesPath.split(".");
  for (let i = 0; i < properties.length; i++) {
    if (current[properties[i]] !== undefined) {
      current = current[properties[i]];
    } else {
      current = null;
      break;
    }
  }

  if (current !== undefined) {
    return current;
  } else {
    return null;
  }
}

console.log(tryGetValue(object, "accessor.accessor.accessor"));

Answer 2

I lean towards using boolean expressions.

let object = {
  accessor: {
    accessor: {
      accessor: "test"
    }
  }
}

if (object
   && object.accessor
   && object.accessor.accessor
   && object.accessor.accessor.accessor) {
  console.log(object.accessor.accessor.accessor);
} else {
  console.log(null);
}

If you're not concerned about compile time error checking, you could implement a solution like this. However, I would advise against it.

function tryGetValue(obj, propertiesPath) {
  if (!obj) {
    return null;
  }

  if (!propertiesPath) {
    return obj;
  }

  let current = obj;
  let properties = propertiesPath.split(".");
  for (let i = 0; i < properties.length; i++) {
    if (current[properties[i]] !== undefined) {
      current = current[properties[i]];
    } else {
      current = null;
      break;
    }
  }

  if (current !== undefined) {
    return current;
  } else {
    return null;
  }
}

console.log(tryGetValue(object, "accessor.accessor.accessor"));

Answer 3

Answer №2

If you're looking to safely navigate through object properties in JavaScript, there is a convenient npm package called snq(Safe Navigation Query) created by armanozak. This solution is both simple and robust.

To use snq, simply follow this syntax:

snq(() => object.accessor.accessor.accessor, anyDefaultValueIfYouLike);

If you're curious about how snq actually works, here's the source code directly from the Github repository:

export default function snq<T = any>(callback: () => T, defaultValue?: T) {
  try {
    const result = callback();
    return typeof result === 'undefined' ? defaultValue : result;
  } catch (err) {
    if (err instanceof TypeError) {
      return defaultValue;
    }

    throw err;
  }
}

Answer 4

If you're looking to safely navigate through object properties in JavaScript, there is a convenient npm package called snq(Safe Navigation Query) created by armanozak. This solution is both simple and robust.

To use snq, simply follow this syntax:

snq(() => object.accessor.accessor.accessor, anyDefaultValueIfYouLike);

If you're curious about how snq actually works, here's the source code directly from the Github repository:

export default function snq<T = any>(callback: () => T, defaultValue?: T) {
  try {
    const result = callback();
    return typeof result === 'undefined' ? defaultValue : result;
  } catch (err) {
    if (err instanceof TypeError) {
      return defaultValue;
    }

    throw err;
  }
}

Answer 5

Answer №3

Here is a simple way to achieve the desired result:

// Example object with nested properties
const obj = {
    keyOne: 'First Level Value',
    nestedObj: {
        keyTwo: 'Second Level Value',
        deeplyNestedObj: {
            keyThree: 'Third Level Value',
            finalAccessor: 'Final Accessor Value'
        }
    }
};

// Using ternary operators for conditional validation
const finalValue = obj ? 
    obj.nestedObj ?
        obj.nestedObj.deeplyNestedObj ?
            obj.nestedObj.deeplyNestedObj.finalAccessor :
            null :
        null :
    null;
    
console.log(finalValue); // Final Accessor Value

Answer 6

Here is a simple way to achieve the desired result:

// Example object with nested properties
const obj = {
    keyOne: 'First Level Value',
    nestedObj: {
        keyTwo: 'Second Level Value',
        deeplyNestedObj: {
            keyThree: 'Third Level Value',
            finalAccessor: 'Final Accessor Value'
        }
    }
};

// Using ternary operators for conditional validation
const finalValue = obj ? 
    obj.nestedObj ?
        obj.nestedObj.deeplyNestedObj ?
            obj.nestedObj.deeplyNestedObj.finalAccessor :
            null :
        null :
    null;
    
console.log(finalValue); // Final Accessor Value

Answer 7

Answer №4

I find great utility in utilizing the Ramda path function within my angular projects.

import * as R from 'ramda';

const leaf = R.path(['accessor', 'accessor', 'accessor'], object);

Another approach I have adopted to prevent crashes when a child is empty (in absence of Ramda), takes inspiration from Swift's `.?` and `??` operators for defaulting to a value if the child is empty.

No need for intricate functions, this concise line will ensure crash-proof operation

const leaf = (((object || {}).accessor || {}).accessor || {}).accessor;

See it in action:

const wrongObject = { accessor: null };
const validObject = { 
  accessor: {
    accessor: {
      accessor: 'your leaf value'
    }
  }
};

// Crash-proof result: undefined
const wrongLeaf = (((wrongObject || {}).accessor || {}).accessor || {}).accessor
console.log(wrongLeaf);

// or with fallback/default value
const defaultLeaf = (((wrongObject || {}).accessor || {}).accessor || {}).accessor || 'default 123';
console.log(defaultLeaf);

const validLeaf = (((validObject || {}).accessor || {}).accessor || {}).accessor
console.log(validLeaf);

Answer 8

I find great utility in utilizing the Ramda path function within my angular projects.

import * as R from 'ramda';

const leaf = R.path(['accessor', 'accessor', 'accessor'], object);

Another approach I have adopted to prevent crashes when a child is empty (in absence of Ramda), takes inspiration from Swift's `.?` and `??` operators for defaulting to a value if the child is empty.

No need for intricate functions, this concise line will ensure crash-proof operation

const leaf = (((object || {}).accessor || {}).accessor || {}).accessor;

See it in action:

const wrongObject = { accessor: null };
const validObject = { 
  accessor: {
    accessor: {
      accessor: 'your leaf value'
    }
  }
};

// Crash-proof result: undefined
const wrongLeaf = (((wrongObject || {}).accessor || {}).accessor || {}).accessor
console.log(wrongLeaf);

// or with fallback/default value
const defaultLeaf = (((wrongObject || {}).accessor || {}).accessor || {}).accessor || 'default 123';
console.log(defaultLeaf);

const validLeaf = (((validObject || {}).accessor || {}).accessor || {}).accessor
console.log(validLeaf);

Answer 9

Answer №5

One way to achieve this in a more concise manner is by using the following shorthand method, enabling the smooth flow of types.

const value = (() => {try{return object.accessor.accessor.accessor}catch(e){return yourDefault;}})();

Answer 10

One way to achieve this in a more concise manner is by using the following shorthand method, enabling the smooth flow of types.

const value = (() => {try{return object.accessor.accessor.accessor}catch(e){return yourDefault;}})();

Experience the crash-free, efficient accessor shorthand in Angular 8 with Native Typescript integration

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Automatically generated error notifications for Express-Validator

Retrieve the specified data stored within the ngValue attribute of an Angular 4 component

The function with the argument type '(dispatch: Dispatch<ShopDispatchTypes>) => Promise<void>' cannot be assigned to a parameter of type 'AnyAction'

Error: The argument 'IParams' is not compatible with the parameter type 'IParams' in Typescript with NextJS14

Angular Material Rotate Ink Bar to Vertical Orientation

"Angular EventEmitter fails to return specified object, resulting in undefined

After a setTimeout is called, the string in Ionic/Angular 2 does not update as expected

Tips for configuring HttpHeaders in Angular 5

Issue with ngOnInit not triggering upon opening dialog

Is it possible to change the value of a react-final-form Field component using the onSelect function?

You won't find the command you seek within the confines of "tsc."

VSCode is unable to locate the typeRoots type declarations

Using TypeScript and encountering Error TS2345 when trying to utilize Promise.all() in a dialog component

Tips for validating Angular form group input depending on the value of another input within the form?

Form validation is an essential feature of the Angular2 template-driven sub form component

The issue arises when TypeScript is unable to accurately infer the type as not being undefined following a type guard condition using

Exploring the Power of Observables in Angular 2: Chaining and

Value of type 'string' cannot be assigned to type '{ model: { nodes: []; links: []; }; }'

Utilize Angular 2 to search and filter information within a component by inputting a search term from another component

Differences between NgRx @Effect and createEffect