Typescript Optional And Readonly Properties Complete Guide

Step 1: Setting Up the Project

First, ensure you have TypeScript installed on your machine. If not, you can install it globally using npm:

npm install -g typescript

Next, create a new directory for your project and initialize a new TypeScript configuration file (tsconfig.json):

mkdir ts-optional-readonly
cd ts-optional-readonly
tsc --init

Step 2: Creating a TypeScript File

Create a new TypeScript file named example.ts. This is where we'll write our code.

Step 3: Defining an Interface with Optional and Readonly Properties

Let's define an interface that includes both optional and readonly properties.

// example.ts

interface User {
    readonly id: number;         // Readonly property; cannot be reassigned after initialization
    name: string;
    email?: string;             // Optional property; might or might not be present
    age?: number;                 // Another optional property
}

const user1: User = {
    id: 1,
    name: "Alice"
};

console.log(user1);             // Output: { id: 1, name: "Alice" }

const user2: User = {
    id: 2,
    name: "Bob",
    email: "bob@example.com",
    age: 25
};

console.log(user2);             // Output: { id: 2, name: "Bob", email: "bob@example.com", age: 25 }

Explanation

1. Interface Definition:

   • readonly id: number;: The id property is marked as readonly, meaning it can only be assigned once during object initialization.
   • name: string;: The name property is a required property of type string.
   • email?: string;: The email property is optional. It’s marked with a question mark (?) indicating it might not always be present in objects of the User interface.
   • age?: number;: Similar to email, the age property is also optional.

2. Object Creation:

   • const user1: User = { id: 1, name: "Alice" };: Here, user1 is created without email or age since these are optional.
   • const user2: User = { id: 2, name: "Bob", email: "bob@example.com", age: 25 };: In this case, all properties except readonly id are provided.

3. Output:

   • When you print user1, TypeScript will show all required and provided properties.
   • Similarly, when you print user2, TypeScript will show all required and provided properties, including the optional ones.

Step 4: Modifying Objects

Now, let's explore modifying these objects and see how the optional and readonly modifiers affect our code.

// example.ts

interface User {
    readonly id: number;
    name: string;
    email?: string;
    age?: number;
}

const user1: User = {
    id: 1,
    name: "Alice"
};

try {
    user1.id = 2;     // Attempting to modify the readonly property 'id'
} catch (error) {
    console.error("Error:", error);
}

user1.name = "Alicia"; // Modifying required property 'name'

console.log(user1);  // Output: { id: 1, name: "Alicia" }

const user2: User = {
    id: 2,
    name: "Bob",
    email: "bob@example.com",
    age: 25
};

if (user2.email) {
    user2.email = "new.email@example.com";
} else {
    user2.email = "bob@newdomain.com";
}

console.log(user2);  // Output depends on the initial value of email, but it will be defined

Explanation

1. Modifying readonly Property:

   • try { user1.id = 2; }: Since the id property is marked as readonly, trying to modify it results in a compile-time error. The error message is caught by the try-catch block and printed to the console.

2. Modifying Required Properties:

   • user1.name = "Alicia";: You can modify the name property since it’s not marked as readonly.

3. Optional Properties:

   • if (user2.email) { user2.email = "new.email@example.com"; } else { user2.email = "bob@newdomain.com"; }: You can safely check if an optional property (email) exists and then modify or assign it.

Step 5: Compiling and Running the Code

To compile and run the TypeScript code, use the following commands:

tsc
node dist/example.js

Note: By default, the compiled JavaScript files are stored in the dist folder unless specified otherwise in tsconfig.json.

Explanation

1. Compiling:

   • tsc: Runs the TypeScript compiler to convert example.ts into example.js.

2. Running:

   • node dist/example.js: Executes the compiled JavaScript file using Node.js.

Summary

You've now seen how to define interfaces in TypeScript with optional and readonly properties. These features help you enforce rules about the structure of your data, making your code more predictable and robust.