How to avoid undefined values when using optional object properties in TypeScript?
Tags: typescript
Published: 2021-09-20 00:00:00

---
  title: How to avoid undefined values when using optional object properties in TypeScript?
  published: true
  tags: TypeScript
  date: Mon Sep 20 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/avoid-undefined-values-when-using-optional-objects-properties-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-0b32241eb47c3fca449056d45fbfc9c1.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/avoid-undefined-values-when-using-optional-objects-properties-typescript)
  
To avoid undefined values when using or accessing the [optional object properties](https://melvingeorge.me/blog/make-object-properties-optional-typescript), the basic idea is to check the property value using an `if conditional` statement or the `optional chaining operator` before accessing the object property in TypeScript.

### TL;DR

```ts
// object type declaration
let personDetails: {
  name: string;
  age?: number;
};

// object
personDetails = {
  name: "John Doe",
};

// Solution 1: ✅
// check if the 'age' property exists in the
// 'personDetails' object before accessing it
// using an if statement conditional check
if (personDetails.age) {
  const age = personDetails.age;
}

// Solution 2: ✅
// check if the 'age' property exists in the
// 'personDetails' object before accessing it
// using optional chaining operator in TypeScript
const age = personDetails?.age || "No age value is supplied";
```

To understand it better let's make an object called `personDetails` with 2 properties called `name` (string type) and `age` (number type) where the `age` property is an optional property. it can be done like this,

```ts
// object type declaration
let personDetails: {
  name: string;
  age?: number;
};

// object
personDetails = {
  name: "John Doe",
};
```

Now the object `personDetails` is valid and is allowed to be executed by the TypeScript compiler since the `age` property is optional.

Now let's try to access the value of the `age` property before the value is set.

It can be done like this,

```ts
// object type declaration
let personDetails: {
  name: string;
  age?: number;
};

// object
personDetails = {
  name: "John Doe",
};

// try to access the 'age' property
// in the personDetails object
const age = personDetails.age; // 🤯 undefined
```

As you can see from the above code, the value of the `age` property is `undefined` because the value is not set which may crash our program during the runtime or results in invalid values.

Typescript allowed us to access the `age` property since it is an optional property and Typescript assumed that we know what we are doing.

Now to avoid this issue we can either use conditional check using an `if statement` or use the `optional chaining operator` like this,

```ts
// object type declaration
let personDetails: {
  name: string;
  age?: number;
};

// object
personDetails = {
  name: "John Doe",
};

// Solution 1: ✅
// check if the 'age' property exists in the
// 'personDetails' object before accessing it
// using an if statement conditional check
if (personDetails.age) {
  const age = personDetails.age;
}

// Solution 2: ✅
// check if the 'age' property exists in the
// 'personDetails' object before accessing it
// using optional chaining operator in TypeScript
const age = personDetails?.age || "No age value is supplied";
```

As you can see from the above code we have corrected our code from being resulting in `undefined` values if the `age` property is not set.

See the execution of the above code live in [codesandbox](https://codesandbox.io/s/avoid-undefined-values-when-using-optional-object-property-in-typescript-i7m6z?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---