How to specify optional properties in TypeScript ?

By Ann Roberts On Feb 2, 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.

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

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

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

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

Read original article here

Denial of responsibility! Techno Blender is an automatic aggregator of the all world’s media. In each content, the hyperlink to the primary source is specified. All trademarks belong to their rightful owners, all materials to their authors. If you are the owner of the content and do not want us to publish your materials, please contact us by email – [email protected]. The content will be deleted within 24 hours.