What methods can be used to display data using TypeScript's Optional Chaining feature?

Question

What methods can be used to display data using TypeScript's Optional Chaining feature?

I came across this Try it Yourself TypeScript Optional Chaining example in W3Schools TypeScript Null & Undefined section, and I have attached a screenshot for reference.

https://i.sstatic.net/s8q1J.png

The example demonstrates that when data is undefined, it displays No Yard. However, I am curious to understand why this happens and how one can make it display Yard size is 500 sqft.

As per my understanding, the code provided defines a variable called home within a new type (House interface) with a property named sqft having a value of 500.

let home: House = {   sqft: 500 }

The subsequent code introduces an interface called House, outlining property names along with their respective types. It specifies sqft as a number type and declares yard? as an optional property with a nested sqft property of number type.

interface House {
  sqft: number;
  yard?: {
    sqft: number;
  };
}

The following snippet is where confusion arises as to why yard size is undefined and displaying No yard.

function printYardSize(house: House) {
  const yardSize = house.yard?.sqft;

  if (yardSize === undefined) {
    console.log('No yard');
  } else {
    console.log(`Yard is ${yardSize} sqft`);
  }
}

From what I gather, the function leverages properties and types from the House interface, utilizing a constant variable yardSize to access the optional yard sqft value. Subsequently, it employs an if-else statement to output the result.

If anyone could provide me with a clear explanation on why it functions the way it does, both displaying No yard for undefined scenarios and Yard is 500 sqft for specified values, I would greatly appreciate the insight. Thank you!

typescript optional-chaining

Answer 1

Answer №1

It seems like there may be some confusion between the two sqft properties:

The one at the top level is linked to the House itself:

interface House {
  sqft: number; // This one
  yard?: {
    sqft: number;
  };
}

and can be accessed like this for a value of type House:

house.sqft
    //^? (property) House.sqft: number

You can see that the type is number. It must be defined for any value of type House.

Moreover, the house could have a yard property or not — in which case it will be undefined.

Refer to optional properties in the TS handbook for more details.

Example:

house.yard
    //^? (property) House.yard?: { sqft: number } | undefined

If the yard property is not undefined, then it must be an object with its own sqft property that must be a number:

interface House {
  sqft: number;
  yard?: {
    sqft: number; // This one
  };
}

Trying to access that nested property without using the optional chaining operator (?.) will result in a compile-time type error:

house.yard.sqft /* Error
~~~~~~~~~~
'house.yard' is possibly 'undefined'.(18048) */

However, using that operator allows for accessing the nested value (if the yard object exists), or evaluating to undefined (if the yard object doesn't exist):

house.yard?.sqft
          //^? (property) sqft: number | undefined

This evaluated value can be stored in another variable, similar to the function you presented:

const yardSize = house.yard?.sqft;
    //^? const yardSize: number | undefined

TS Playground

Now, let's address your queries:

Why is it undefined and shows no yard?

let home: House = {
  sqft: 500, // sqft of home
};

printYardSize(home); // "No yard"

In the provided code snippet, the home lacks a yard property with a nested sqft property, so in the function, the yardSize variable is set to undefined. As a result, the initial conditional branch is executed:

const yardSize = house.yard?.sqft;

if (yardSize === undefined) {
  console.log("No yard");
}

How do you get it to display Yard size as 500 sqft?

let home2: House = {
  sqft: 500,
  yard: {
    sqft: 500, // sqft of yard
  },
};

printYardSize(home2); // "Yard is 500 sqft"

As illustrated above, you can assign the yard property to an object with a sqft property value of 500. This triggers the execution of the else branch instead:

else {
  console.log(`Yard is ${yardSize} sqft`);
}

Alternatively, you could set the yard property on the first home after initializing it like this:

home.yard = { sqft: 500 };
printYardSize(home); // "Yard is 500 sqft"

TS Playground

Answer 2

It seems like there may be some confusion between the two sqft properties:

The one at the top level is linked to the House itself:

interface House {
  sqft: number; // This one
  yard?: {
    sqft: number;
  };
}

and can be accessed like this for a value of type House:

house.sqft
    //^? (property) House.sqft: number

You can see that the type is number. It must be defined for any value of type House.

Moreover, the house could have a yard property or not — in which case it will be undefined.

Refer to optional properties in the TS handbook for more details.

Example:

house.yard
    //^? (property) House.yard?: { sqft: number } | undefined

If the yard property is not undefined, then it must be an object with its own sqft property that must be a number:

interface House {
  sqft: number;
  yard?: {
    sqft: number; // This one
  };
}

Trying to access that nested property without using the optional chaining operator (?.) will result in a compile-time type error:

house.yard.sqft /* Error
~~~~~~~~~~
'house.yard' is possibly 'undefined'.(18048) */

However, using that operator allows for accessing the nested value (if the yard object exists), or evaluating to undefined (if the yard object doesn't exist):

house.yard?.sqft
          //^? (property) sqft: number | undefined

This evaluated value can be stored in another variable, similar to the function you presented:

const yardSize = house.yard?.sqft;
    //^? const yardSize: number | undefined

TS Playground

Now, let's address your queries:

Why is it undefined and shows no yard?

let home: House = {
  sqft: 500, // sqft of home
};

printYardSize(home); // "No yard"

In the provided code snippet, the home lacks a yard property with a nested sqft property, so in the function, the yardSize variable is set to undefined. As a result, the initial conditional branch is executed:

const yardSize = house.yard?.sqft;

if (yardSize === undefined) {
  console.log("No yard");
}

How do you get it to display Yard size as 500 sqft?

let home2: House = {
  sqft: 500,
  yard: {
    sqft: 500, // sqft of yard
  },
};

printYardSize(home2); // "Yard is 500 sqft"

As illustrated above, you can assign the yard property to an object with a sqft property value of 500. This triggers the execution of the else branch instead:

else {
  console.log(`Yard is ${yardSize} sqft`);
}

Alternatively, you could set the yard property on the first home after initializing it like this:

home.yard = { sqft: 500 };
printYardSize(home); // "Yard is 500 sqft"

TS Playground

Answer 3

Answer №2

My exploration of this question involved examining it from two different angles

Utilizing Optional Chaining to potentially find the yard size
or potentially finding both the house and yard sizes.

Below is the code for optionally determining the yard size

interface House {
  sqft: number;
  yard?: {
    sqft: number;
  };
}
            
function printYardSize(house: House) {
  const yardSize = house.yard?.sqft;

  if (yardSize === undefined) {
    console.log('No yard');
  } else {
    console.log(`Yard is ${yardSize} sqft`);
  }
}
            
let home: House = {
  sqft: 7350,
  yard: {             
         sqft: 2300
        }
};

// Can also set yard property on home after initializing it with
home.yard = { sqft: 2300 }
  

printYardSize(home); // Either prints No yard or Yard is 2300 sqft

If the yard size is excluded, it will display 'No Yard', but if included, it will show 'Yard size is 2300 sqft'. This showcases how the use of the ? operator in the declaration of the home variable allows for optional data without triggering errors.

Here is the code for optionally determining the house and yard sizes

// This example showcases a house and yard size being displayed 
interface House {
  sqft?: number,
  yard?: {
          sqft: number;
         };  
}

function printHouseSize(house:House)  {
  const houseSize = house?.sqft;    

  if(houseSize === undefined)  {
    console.log('No House');
  } else {
    console.log(`House is ${houseSize} sqft`)
  }
}

function printYardSize(house:House)  {
  const yardSize = house.yard?.sqft;  

  if(yardSize === undefined)  {
    console.log('No Yard');
  } else {
    console.log(`Yard is ${yardSize} sqft`)
  }
} 

let home: House = {
  sqft: 7350,            
  yard: {       
         sqft: 2300    
        }
};

printHouseSize(home);
printYardSize(home);

If the house size is omitted, it will say 'No House', and if included, it will state 'House size is 7350 sqft'. The same applies for the yard size. This demonstrates that through the use of the ? optional chaining operator, errors can be avoided when dealing with optional property values.

It's worth noting that the ? operator is used in interfaces where property types are declared and in functions when retrieving property values, as seen in const yardSize = house.yard?.sqft; .

Please keep in mind: The optional chaining operator is not required in the declared home variable, as it pertains to setting values rather than accessing properties.

Answer 4

My exploration of this question involved examining it from two different angles

Utilizing Optional Chaining to potentially find the yard size
or potentially finding both the house and yard sizes.

Below is the code for optionally determining the yard size

interface House {
  sqft: number;
  yard?: {
    sqft: number;
  };
}
            
function printYardSize(house: House) {
  const yardSize = house.yard?.sqft;

  if (yardSize === undefined) {
    console.log('No yard');
  } else {
    console.log(`Yard is ${yardSize} sqft`);
  }
}
            
let home: House = {
  sqft: 7350,
  yard: {             
         sqft: 2300
        }
};

// Can also set yard property on home after initializing it with
home.yard = { sqft: 2300 }
  

printYardSize(home); // Either prints No yard or Yard is 2300 sqft

If the yard size is excluded, it will display 'No Yard', but if included, it will show 'Yard size is 2300 sqft'. This showcases how the use of the ? operator in the declaration of the home variable allows for optional data without triggering errors.

Here is the code for optionally determining the house and yard sizes

// This example showcases a house and yard size being displayed 
interface House {
  sqft?: number,
  yard?: {
          sqft: number;
         };  
}

function printHouseSize(house:House)  {
  const houseSize = house?.sqft;    

  if(houseSize === undefined)  {
    console.log('No House');
  } else {
    console.log(`House is ${houseSize} sqft`)
  }
}

function printYardSize(house:House)  {
  const yardSize = house.yard?.sqft;  

  if(yardSize === undefined)  {
    console.log('No Yard');
  } else {
    console.log(`Yard is ${yardSize} sqft`)
  }
} 

let home: House = {
  sqft: 7350,            
  yard: {       
         sqft: 2300    
        }
};

printHouseSize(home);
printYardSize(home);

If the house size is omitted, it will say 'No House', and if included, it will state 'House size is 7350 sqft'. The same applies for the yard size. This demonstrates that through the use of the ? optional chaining operator, errors can be avoided when dealing with optional property values.

It's worth noting that the ? operator is used in interfaces where property types are declared and in functions when retrieving property values, as seen in const yardSize = house.yard?.sqft; .

Please keep in mind: The optional chaining operator is not required in the declared home variable, as it pertains to setting values rather than accessing properties.

What methods can be used to display data using TypeScript's Optional Chaining feature?

Answer №1

Answer №2

Similar questions

Hiding a div after three clicks using HTML

Typescript Error: Issue encountered while passing props. Unable to access properties as they are undefined

Exploring Angular 10's advanced forms: delving into three levels of nested form groups combined with

utilizing routerLinks to transfer data and trigger a specific function

Issue TS2349 occurs when attempting to use a combination of boolean and function types within union typing

The functionality of CSS transitions may be affected when dynamically adding a class

When running the test, a "is not defined" ReferenceError occurs in the declared namespace (.d.ts) in ts-jest

You must add the module-alias/register to each file in order to use path aliases in

Issue encountered: Jest database test does not end when using testcontainers

After upgrading to version 8 of the Firebase JS SDK, the "firestore" module (imported as "firebase") could not be located within the "firebase" package

I am unable to refresh the table data in Angular

The formatting in vscode does not apply to .tsx files

Tips for accurately documenting the Props parameter in a React component with Destructuring assignment

No search results found for Mongoose text search query

What steps can I take to set a strict boundary for displaying the address closer to the current location?

The model fails to update when a blur event occurs

Issue with DevExtreme nested table not expanding when sorting the parent table

Receiving an eslint error while trying to integrate Stripe pricing table into a React web application

Creating a grid UI in AngularJS using Typescript: utilizing functions as column values

Tips for utilizing functions in an inline HTML translation pipe