5 Easy way handle undefined in typescript


Modern languages such as Python, Ruby, or Java also have the single null value, which seems to be the same approach. But the typescript is different. Null, but also undefined, and represented in the typescript empty values. So what is the exact difference between those?

This short answer is that the typescript interpreter also returns undefined while accessing the variable/object the property which is not yet initialized. 

On another side, the null represents the missing object reference. The typescript does not initialize variables or the object properties with this null. Below you come to know How to Fix The Error “Updates Were Rejected Because The Tip of Your Current Branch is Behind”

Some native processes

Like the String.prototype.match () can easily return the null for denoting the missing object. Let’s check the instance:

let array = null;  

array; // => null

let movie = { name: ‘Starship Troopers’, musicBy: null };

movie.musicBy; // => null

‘abc’.match(/[0-9]/); // => null

Just because typescript is permissive, the developers also have the specific temptation to access the uninitialized values. 

Sometimes these risky actions generate the undefined related the errors:

  • TypeError: ‘undefined’ is not a function
  • TypeError: Cannot read property ‘<prop-name>’ of undefined
  • & alike the type errors.
  • Favor const, otherwise utilize let, but say goodbye tothevar
  • Const & let are block-scoped& exist in the temporal dead zone until this declaration line.
  • One of the specific nice features of const is that youhaveto assign an initial value to the variable const variable = ‘initial.’ This variable is also not exposed to an uninitialized state & accessing this undefined is just impossible.

Read Also: Buy Your Own Home; Hassle-Free

Increase cohesion

Cohesion characterizes this degree or o that elements of the module also belong together. This cohesion also can be very high/low.

The high cohesion module is also preferable just because the elements of such module focus solely on a single task. This also makes this module:

  • Focused & understandable: easier to understand what this module does.
  • Maintainable & easier to the refactor: the particular change in the module affects the fewer modules
  • Reusable: being focused on a single task, this makes this module easier to reuse
  • Testable: you would more straightforward test the module that had focused on the single task

 Check the specific property’s existence.

Fortunately, typescript provides a bunch of methods to determine if this Object has a particular property:

  • obj.prop! == Undefined: compare against the undefined directly
  • Type of obj.prop! == ‘undefined’: verify the specific property value type
  • obj.hasOwnProperty (‘prop’): verify whether an object has the own property
  • ‘prop’ in obj: verify whether an object has the own/inherited property

Destructuring to access the object properties

While accessing the object property, often, it is necessary to set the default value if this property does not exist.

You could utilize in the accompanied with ternary operator to th accomplish that:

const object= { };

Const prop= ‘prop, in object? Object.proo: ‘ default’;

Prop;//= ‘ default’

Ternary operator syntax also becomes very much daunting while the number of properties to check the enhanced. You must also make a new line of code for every property to manage the defaults, enhancing the ugly wall of similar-looking ternary operators.

To utilize the maximum elegant approach, let’s be familiar with the great feature ofbES2015, Object destructuring.

Object destructuring permits the inline extraction of the object property values directly into the variables and setting the default value if the property does not exist—the convenience syntax ignores the dealing directly with undefined.

Fill an object with the default properties.

Suppose there is no requirement to make the variables for each property, as this destructuring assignment does. In that case, this Object which misses some particular properties can also be filled with the default values.

The ES2015 Object assign (target, source1, source2,) copies the particular values of every own enumerable property from one / maximum source objects into a targeted object. This function also returns the targeted Object.

For example, you must access these properties of the unsafe options Object, which doesn’t always contain the complete set of properties.


Undefined existence is the consequence of typescript’s permissive nature, which permits the utilization of:

  • The uninitialized variables
  • Non-existing object properties / the processes
  • out of bounds indexes to access the array items
  • an invocation result of the function which returns nothing

Comparing directly against the undefined is also unsafe because you rely on the permitted and discouraged practices mentioned above.


Please enter your comment!
Please enter your name here