Replacement of Elvis Operator of Angular2 in Typescript

Is there any operator in the typescript which is used similer to Elvis Operator of angular2, i mean to say let supppose i have to get key from object like this:

this.myForm.name.first_name

and in case first_name does't exist so it will throw error first_name of undefined,

yes i can handel this error using Ternary operator of typescript like this

this.myForm.name ? this.myForm.name.first_name : ''

but sometimes keys are getting too long,

so is there any operator like Elvis Operator of angular2 in the typescript so that i can use like this

this.myForm?.name?.first_name

Answers:

Answer

Update December 2019: TypeScript 3.7 introduced Optional Chaining which is equivalent to the safe navigation operator known in other languages. The ECMAScript proposal optional chaining has reached stage 4 and will thus be part of the specification in ES2020. See mdn: Optional chaining for more information.


Update July 2017: As JGFMK pointed out in the comments, there is an ECMAScript proposal called Optional Chaining for JavaScript. If/when the proposal reaches Stage 4, it will be added to the language specification.


There is neither a safe navigation nor elvis operator in TypeScript and, as far as I know, nothing comparable, either.

For a reference see the feature request at Suggestion: "safe navigation operator", i.e. x?.y. The explanation for not implementing it is the following (which, in my opinion, is a valid reason):

Closing this for now. Since there's not really anything TypeScript-specific that would require this at expression level, this kind of big operator change should happen at the ES spec committee rather than here.

The general tripwires for re-evaluating this would be a concrete ES proposal reaching the next stage, or a general consensus from the ES committee that this feature wouldn't happen for a long time (so that we could define our own semantics and be reasonably sure that they would "win").

Alternatives to that notation would be to use the logical AND operator, try/catch or a helper function like getSafe(() => this.myForm.name.first_name) as described in this post.

Answer

Repeatedly OR it with an empty object

I can't live without Elvis when writing HTML that references properties/subproperties that may or may not exist.

We can't write

this.myForm?.name?.first_name

I guess the people in charge of ES are probably spending most of their time actually writing JS, and not writing bits of front-end HTML that accesses object properties, hence their bemusement as to why anyone would need safe navigation.

They argue that "Nobody needs it", "It allows errors to be silent and could thereby bite you later" and "How would you interpret x?(y) ?"

My solution, while I wait for a future ES specification to include the Elvis operator, is as follows:

(((this.myForm || {}).name || {}).first_name )

In short, at every stage that a value could be undefined, you OR it with a {}, so that the undefined becomes an empty object. Once you put that whole thing into parentheses, you are safe to try to extract a property of it, since any property you try to extract from {} is simply undefined rather than an actual error.

It does get a bit ugly when you have multiple tiers, but in many cases it is less ugly than having to use a series of && to progressively step down through the levels of the object.

For array access, OR it with an empty array

If navigating into an array, for example if the form had many names and you wanted to select the first, the approach is similar:

((((this.myForm || {}).names || [])[0] || {}).first_name )

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.