How to Make a Single Property Optional in TypeScript ?
Last Updated :
15 May, 2024
TypeScript is a popular programming language that is a strict syntactical superset of JavaScript, adding optional static typing and class-based object-oriented programming to the language. One useful feature of TypeScript is the ability to specify optional properties in interfaces and classes, allowing you to define an object type that may or may not have certain properties.
Using Utility Type
This approach employs a utility type named MakeOptional
. The utility type uses TypeScript's Omit
to exclude the specified property and introduce the ?
syntax to mark it as optional.
Syntax:
type MakePropertyOptional<T, K extends keyof T> = Omit<T, K> & { [P in K]?: T[P] };
Parameters:
T
: The original type.K
: The key of the property you want to make optional.
Note: It uses Omit<T, K>
to exclude the specified property and then introduces { [P in K]?: T[P] }
to add the property back as optional.
Example: here, we define a utility type MakeOptional
that takes a generic type T
and a property key K
. It utilizes TypeScript's Omit
to exclude the specified property and introduce the ?
syntax to make it optional. The resulting ExampleWithOptionalAge
type is then used to create an object with the age
property being optional.
JavaScript
type MakeOptional<T, K extends keyof T> =
Omit<T, K> & { [P in K]?: T[P] };
interface Example {
name: string;
age: number;
}
// Make 'age' property optional
type ExampleWithOptionalAge =
MakeOptional<Example, 'age'>;
// Example usage:
const optionalAgeExample:
ExampleWithOptionalAge = { name: 'John' };
console.log(optionalAgeExample);
Output:
{ "name": "John" }
Optional Property Inside an Interface:
In TypeScript, an interface is a way to define the structure of an object. When making a property optional inside an interface, you use the ?
modifier after the property name.
Example: Here,
the lastName
property is marked as optional by appending ?
after its name in the Person
interface. This allows objects of type Person
to either include or exclude the lastName
property. The person1
object doesn't have a lastName
property, while the person2
object includes it. Attempting to create an object without the required properties (firstName
and age
in this case) will result in a compilation error.
JavaScript
interface Person {
firstName: string;
lastName?: string;
age: number;
}
// Valid usage
const person1: Person = {
firstName: "John",
age: 25
};
// Valid usage with optional property
const person2: Person = {
firstName: "Alice",
lastName: "Johnson",
age: 30
};
// Error: Missing required property 'age'
const person3: Person = {
firstName: "Bob"
};
Output:
Property 'age' is missing in type '{ firstName: string; }' but required in type 'Person'.
Optional Property Inside a Class:
In TypeScript, a class is a blueprint for creating objects. When making a property optional inside a class, you declare the property with a ?
modifier in the class definition. Additionally, you may need to adjust the constructor to handle the optional property.
Example: Here, the lastName
property is marked as optional in the Person
class. When creating instances of the class, you can choose to provide or omit the lastName
property. The person1
instance is created without specifying the lastName
, while the person2
instance includes it.
JavaScript
class Person {
firstName: string;
// Making lastName optional
lastName?: string;
age: number;
constructor(firstName: string,
age: number,
lastName?: string) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
}
// Creating instances
const person1 = new Person("John", 25);
const person2 = new Person("Alice", 30, "Johnson");
console.log(person1);
console.log(person2);
Output:
Person: {
"firstName": "John",
"lastName": undefined,
"age": 25
}
Person: {
"firstName": "Alice",
"lastName": "Johnson",
"age": 30
}
Using Object Spread Syntax
This approach leverages the object spread syntax to create a new object with the specified property marked as optional.
Syntax:
interface OriginalType {
// Define properties here
}
// Making a single property optional using object spread syntax
const newObject = { ...originalObject, propertyName?: value };
Parameters:
- originalObject: The original object.
- propertyName: The name of the property you want to make optional.
- value: Optional value for the property.
Example: Here's how you can make a single property optional in TypeScript using object spread syntax:
JavaScript
interface Example {
name: string;
age: number;
}
// Original object
const originalExample: Example = { name: 'GFG', age: 22 };
// Make 'age' property optional using object spread syntax
const optionalAgeExample: Partial<Example> = { ...originalExample, age: undefined };
console.log(optionalAgeExample);
Output:
{
"name": "GFG",
"age": undefined
}
Using Conditional and Mapped Types
This approach introduces a utility type called OptionalProperty that makes a specified property optional. Unlike previous methods, it employs advanced TypeScript features for a streamlined solution.
Syntax:
type OptionalProperty<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
Parameters:
- T: The original type.
- K: The key of the property you want to make optional.
This utility type first removes the specified property from the type (Omit<T, K>) and then reintroduces it as optional using Partial<Pick<T, K>>.
Example: Here, we define a utility type OptionalProperty that takes a generic type T and a property key K. It utilizes TypeScript's Omit and Partial to make the specified property optional. The resulting PersonWithOptionalLastName type is then used to create an object with the lastName property being optional.
JavaScript
type OptionalProperty<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
interface Person {
firstName: string;
lastName: string;
age: number;
}
// Make 'lastName' property optional
type PersonWithOptionalLastName = OptionalProperty<Person, 'lastName'>;
// Example usage:
const person1: PersonWithOptionalLastName = { firstName: 'John', age: 25 };
const person2: PersonWithOptionalLastName = { firstName: 'Alice', lastName: 'Johnson', age: 30 };
console.log(person1); // Output: { firstName: 'John', age: 25 }
console.log(person2); // Output: { firstName: 'Alice', lastName: 'Johnson', age: 30 }
Output:
{ firstName: 'John', age: 25 }
{ firstName: 'Alice', lastName: 'Johnson', age: 30 }
Similar Reads
How to Specify Optional Properties in TypeScript?
TypeScript is a powerful programming language that extends JavaScript by adding optional static typing and class-based object-oriented programming. One of the key features of TypeScript is the ability to specify optional properties in interfaces and classes, providing flexibility to our object types
3 min read
Optional Property Class in TypeScript
TypeScript is an Object Oriented Programming language that allows you to create classes with optional properties which may or may not be assigned with a value. We will discuss two different ways of creating optional property classes in TypeScript: Table of Content By using the Question Mark(?)By ass
4 min read
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?: O
3 min read
How to make object properties immutable in TypeScript ?
In this article, we will try to understand how we could make object properties immutable in TypeScript. JavaScript is a highly dynamic and flexible language, hence making object properties in JavaScript immutable is a little bit typical (although we may implement it somehow using a const data type t
2 min read
TypeScript Optional Properties Type
TypeScript Opional properties type provides a way of defining the parts that are not necessarily required. TypeScript Optional Properties TypesOptional Properties are properties that are not required mandatorily and can be omitted when not needed.In TypeScript, you can define optional properties in
6 min read
How to Explicitly Set a New Property on Window in TypeScript ?
In TypeScript, the window object represents the global window in a browser environment. It provides access to various properties and methods related to the browser window. You can set a new custom property on this window object using the below approaches. Table of Content By extending the window int
2 min read
How to Define Static Property in TypeScript Interface?
A static property in a class is a property that belongs to the class itself, rather than to instances of the class. It is shared among all instances of the class and can be accessed without creating an instance of the class. Static properties are defined using the static keyword in front of the prop
3 min read
How To Pick And Omit Keys in TypeScript?
In TypeScript, when working with objects, there are scenarios where we may want to pick or omit certain keys from an existing type. TypeScript provides utility types Pick and Omit to accomplish this. These utilities allow us to create new types by including or excluding specific properties from an e
4 min read
How to Create an Interface with Optional Property ?
In TypeScript interfaces play a crucial role in defining the structure of objects. One of the powerful features is the ability to specify optional properties within an interface. It allows developers to create flexible structures that can be helpful in various scenarios. In this article, we will exp
2 min read
How to fix "object is possibly null" in TypeScript ?
The "object is possibly null" error in TypeScript occurs when the compiler detects a potential null or undefined value for an object or variable. This error is important for ensuring type safety and preventing runtime errors related to null or undefined values. There are several approaches to fix th
4 min read