TypeScript Object Type Optional Properties

In TypeScript, optional properties are denoted using the ? modifier after the property name in the object type definition. This means that when an object is created, the optional property can either be provided or omitted.

Syntax:

type TypeName = {
    propertyName: PropertyType;
    optionalPropertyName?: OptionalPropertyType;
};

Where:

• TypeName: The name of the object type you're defining.
• propertyName: A required property of the object, with its type specified.
• optionalPropertyName?: An optional property of the object, denoted by the ? symbol after the property name. It can be omitted when creating objects of this type.
• OptionalPropertyType: Represents the type of the optional property.

Example 1: In this example, We define a Course object type with one optional property: price. We create two objects of type Course, Course1 with just the name property and Course2 with both name and price.We safely access the optional property price using conditional checks to ensure its existence before displaying its value or indicating its absence.

// Define an object type with an optional property 
type Course = { 
	name: string; 
	// Optional property 
	price?: number; 
}; 

// Create an object using the defined type 
const Course1: Course = { 
	name: "Java", 
}; 

const Course2: Course = { 
	name: "C++", 
	price: 150.00, 
}; 

// Accessing the optional property safely 
if (Course1.price !== undefined) { 
	console.log(`${Course1.name} costs $${Course1.price}`); 
} else { 
	console.log(`${Course1.name} price is not specified.`); 
} 

if (Course2.price !== undefined) { 
	console.log(`${Course2.name} costs Rs${Course2.price}`); 
} else { 
	console.log(`${Course2.name} price is not specified.`); 
}

Output:

Example 2: In this example,We have the strictNullChecks option enabled, which ensures that you handle undefined and null values appropriately.We define a Person object type with two optional properties: age, which can be undefined, and address, which can be null or undefined.

// Enable strictNullChecks in tsconfig.json 
// or via command line compiler flags: 
// "strictNullChecks": true 

// Define an object type with optional properties 
type Person = { 
	name: string; 
	// Optional property that can be undefined 
	age?: number; 
	// Optional property that can be null or undefined 
	address?: string | null; 
}; 

// Create an object using the defined type 
const person1: Person = { 
	name: "Akshit", 
	age: 25, 
}; 

const person2: Person = { 
	name: "Bob", 
	// age is not provided, so it's undefined by default 
	// address is explicitly set to null 
	address: null, 
}; 

// Accessing optional properties safely with strictNullChecks 
if (person1.age !== undefined) { 
	console.log(`${person1.name}'s age is ${person1.age}`); 
} else { 
	console.log(`${person1.name} did not provide an age.`); 
} 

if (person2.address !== undefined && person2.address !== null) { 
	console.log(`${person2.name} lives at ${person2.address}`); 
} else { 
	console.log(`${person2.name} did not provide an address.`); 
}

Output:

Conclusion:

In this article, we explored the concept of optional properties in TypeScript. We discussed their syntax and provided practical examples to illustrate their usage. Optional properties allow for greater flexibility when defining object types, enabling the creation of objects with varying sets of properties. This feature is particularly useful in scenarios where not all properties are always required, making the code more robust and adaptable.

21mcsrltd

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• Geeks Premier League
• TypeScript
• Geeks Premier League 2023

+1 More