TypeScript Object Type Optional Properties
In this article, we are going to learn about Object Type Optional Properties in Typescript. TypeScript is a popular programming language used for building scalable and robust applications. In TypeScript, an object type can have optional properties, which means that some properties of the object can be present or absent when creating objects of that type. Optional properties are denoted using the ‘?’ modifier after the property name in the object type definition.
Syntax:
type TypeName = {
propertyName: PropertyType;
optionalPropertyName?: OptionalPropertyType;
};
Where-
- TypeName is the name of the object type you’re defining.
- propertyName is a required property of the object, with its type specified.
- optionalPropertyName? is 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.
Javascript
// 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.
Javascript
// 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 have discussed Object Type Optional Properties and it’s syntax. It is used for creating an object having some optional properties. It helps in creating different kind of objects having different key and value pair properties.
Contact Us