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.