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 assigning the properties with default values
- By Using Partial Types
By using the Question Mark(?)
The optional properties can also be created by declaring the properties with a question mark symbol just after the name of the property. The question mark symbol tells the TypeScript compiler that the declared property is optional.
Syntax:
class className {
property1: type;
property2?: type;
property3?: type;
}
Example: The below code example uses the question mark symbol to define a class with optional properties in TypeScript.
class optionalPropClass {
name: string;
company?: string;
age?: number;
constructor(
name: string,
company?: string,
age?: number) {
this.name = name;
this.company = company;
this.age = age;
}
}
const employee1 =
new optionalPropClass("Employee 1");
const employee2 =
new optionalPropClass("Employee 2", "company 1");
const employee3 =
new optionalPropClass("Employee 3", "company 2", 32);
console.log(`
Employee Name: ${employee1.name},
Company: ${employee1.company ? employee1.company : "N/A"},
Age: ${employee1.age ? employee1.age : "N/A"}
`);
console.log(`
Employee Name: ${employee2.name},
Company: ${employee2.company ? employee2.company : "N/A"},
Age: ${employee2.age ? employee2.age : "N/A"}
`);
console.log(`
Employee Name: ${employee3.name},
Company: ${employee3.company ? employee3.company : "N/A"},
Age: ${employee3.age ? employee3.age : "N/A"}
`);
Output:
Employee Name: Employee 1, Company: N/A, Age: N/A
Employee Name: Employee 2, Company: company 1, Age: N/A
Employee Name: Employee 3, Company: company 2, Age: 32
By assigning the properties with default values
If the properties of a class are initialized with some initial or default values, then either you pass or omit the values of those properties while creating an instance will not throw an error and it uses the provided default values in the case you omit passing the values.
Syntax:
class className {
property1: type;
property2: type = initialValue;
property3: type = initialValue;
}
Example: The below code example implements the default values approach to create optional properties class in TypeScript.
class optionalPropClass {
name: string;
company: string = "w3wiki";
age: number = 25;
constructor(
name: string,
company: string = "w3wiki",
age: number = 25) {
this.name = name;
this.company = company;
this.age = age;
}
}
const employee1 =
new optionalPropClass("Employee 1");
const employee2 =
new optionalPropClass("Employee 2", "company 1");
const employee3 =
new optionalPropClass("Employee 3", "company 2", 32);
console.log(`
Employee Name: ${employee1.name},
Company: ${employee1.company},
Age: ${employee1.age}
`);
console.log(`
Employee Name: ${employee2.name},
Company: ${employee2.company},
Age: ${employee2.age}
`);
console.log(`
Employee Name: ${employee3.name},
Company: ${employee3.company},
Age: ${employee3.age}
`);
Output:
Employee Name: Employee 1, Company: w3wiki, Age: 25
Employee Name: Employee 2, Company: company 1, Age: 25
Employee Name: Employee 3, Company: company 2, Age: 32
By Using Partial Types
In TypeScript, you can leverage partial types to define classes with optional properties. Partial types allow you to specify that all properties of a type are optional, which aligns well with creating classes with optional properties.
Syntax:
class ClassName {
property1: type;
property2?: type;
property3?: type;
}
- property1: Required property.
- property2 and property3: Optional properties.
By using partial types, you can explicitly declare that certain properties may or may not be assigned values when creating instances of the class.
Example: In this example Class OptionalPropClass has optional properties: company and age. Instances are created with various property combinations. Displayed information shows properties or “N/A” if undefined.
class OptionalPropClass {
name: string;
company?: string;
age?: number;
constructor(
name: string,
company?: string,
age?: number
) {
this.name = name;
this.company = company;
this.age = age;
}
}
// Creating instances of OptionalPropClass with various combinations of properties
const employee1 = new OptionalPropClass("Employee 1");
const employee2 = new OptionalPropClass("Employee 2", "Company 1");
const employee3 = new OptionalPropClass("Employee 3", "Company 2", 32);
// Displaying information about the created instances
console.log(`
Employee Name: ${employee1.name},
Company: ${employee1.company ? employee1.company : "N/A"},
Age: ${employee1.age ? employee1.age : "N/A"}
`);
console.log(`
Employee Name: ${employee2.name},
Company: ${employee2.company ? employee2.company : "N/A"},
Age: ${employee2.age ? employee2.age : "N/A"}
`);
console.log(`
Employee Name: ${employee3.name},
Company: ${employee3.company ? employee3.company : "N/A"},
Age: ${employee3.age ? employee3.age : "N/A"}
`);
Output:
"
Employee Name: Employee 1,
Company: N/A,
Age: N/A
"
"
Employee Name: Employee 2,
Company: Company 1,
Age: N/A
"
"
Employee Name: Employee 3,
Company: Company 2,
Age: 32
"
Contact Us