How to specify optional properties in TypeScript ?
Last Updated :
02 Feb, 2023
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. In this tutorial, we will learn how to specify optional properties in TypeScript to add flexibility to our object types.
Prerequisites:
We can specify optional properties in TypeScript using the following methods.
Method 1: We can specify optional properties in interfaces. To specify optional properties in TypeScript interfaces and classes, we can use the question mark (?) symbol after the property name.
Syntax:
keyname?: value;
Note: This syntax is applicable for all the examples given below, with the “?” specifying that the property is optional.
Example:
Javascript
interface User {
name: string;
age?: number;
occupation?: string;
}
let user: User = {
name: 'John Doe'
};
console.log(user);
|
Output: On compiling and running the above code, we get the following output:
The object is logged into the console without any errors
Explanation: In the above example, the User interface has three properties: name, age, and occupation. The name property is required, while the age and occupation properties are optional. This means that an object of type User must have a name property, but can have either or both of the optional age and occupation properties.
Method 2: We can also specify optional properties in classes using the same syntax.
Example:
Javascript
class User {
fname: string;
lname?: string;
age?: number;
occupation?: string;
constructor(name: string, lname:string) {
this.fname = name;
this.lname = lname;
}
}
let user = new User('Classy', 'John');
console.log(user);
|
Output:
the user object is logged in the console
Explanation: In this example, the User class has the same three properties as the User interface in the previous example, along with another optional property lname. The fname property is required, while the lname, age and occupation properties are optional. We have specified the required fname, along with an optional lname property.
Method 3: Optional Properties in Object Literals. It is important to note that optional properties are only allowed in interfaces and classes, and not in object literals. To specify optional properties in object literals, you can specify that the property is optional by in the type definition.
Example:
Javascript
let user: { name: string, age?: number, occupation?: string } = {
name: 'John Smith',
age: 31
};
console.log(user);
|
Output: On compiling and running the above code, the user object is logged to console with the name and age properties, without any errors as shown below.
user object logged in the console
Explanation: In this example, the user object has three properties: name, age, and occupation. The name property is required, while the age and occupation properties are optional, and can be specified as per the requirements.
Method 4: Optional Properties Using in type Keyword. To specify optional properties in TypeScript using the type keyword, the “?” operator after the property name can be used, same as interfaces. For example:
Javascript
type User = {
name: string;
age?: number;
occupation?: string;
};
let user: User = {
name: 'John Doe'
};
|
Output: Here, we have only defined the required variable name, and logged it to the console as shown below.
user object logged to console
Explanation: In this tutorial, we learned how to specify optional properties in TypeScript using the question mark (?) symbol. Optional properties allow us to add flexibility to our object types, allowing us to define required properties while still allowing for additional, optional data. I hope this tutorial has been helpful in understanding how to specify optional properties in TypeScript.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...