TypeScript Object Types

TypeScript object types define the structure of objects by specifying property types, ensuring type safety and clarity when passing objects as function parameters.

• Optional properties, denoted with a ? provide flexibility for objects with varying properties.
• This approach enhances code robustness by allowing the omission of certain properties when appropriate.

interface Person {
    name: string;
    age: number;
    address?: string; // Optional property
}

function greet(person: Person): string {
    return `Hello, ${person.name}!`;
}

const user: Person = {
    name: "Alice",
    age: 30
};

console.log(greet(user)); 

• The Person interface defines an object type with name and age as required properties, and address as an optional property.
• The greet function accepts a parameter of type Person and returns a greeting message.
• The user object adheres to the Person interface, and the greet function is called with this object.

Output:

Hello, Alice!

More Example of TypeScript Object Types

Defining a Car Object

interface Car {
    make: string;
    model: string;
    year: number;
    electric?: boolean; // Optional property
}

const myCar: Car = {
    make: "Tesla",
    model: "Model S",
    year: 2022,
    electric: true
};

console.log(`I drive a ${myCar.year} ${myCar.make} ${myCar.model}.`);

• The Car interface defines an object type with make, model, and year as required properties, and electric as an optional property.
• The myCar object adheres to the Car interface, specifying values for all properties.

Output:

I drive a 2022 Tesla Model S.

Nested Object Types for a Book

interface Author {
    name: string;
    birthYear: number;
}

interface Book {
    title: string;
    author: Author;
    pages: number;
    genre?: string; // Optional property
}

const myBook: Book = {
    title: "TypeScript Basics",
    author: {
        name: "Jane Doe",
        birthYear: 1980
    },
    pages: 350
};

console.log(`${myBook.title} by ${myBook.author.name}`);

• The Author interface defines the structure for an author object.
• The Book interface includes a nested author property of type Author, along with other properties.
• The myBook object conforms to the Book interface, including a nested author object.

Output:

TypeScript Basics by Jane Doe

Function Parameter with Object Type

interface Rectangle {
    width: number;
    height: number;
}
function calculateArea(rect: Rectangle): number {
    return rect.width * rect.height;
}
const myRectangle: Rectangle = {
    width: 10,
    height: 5
};
console.log(`Area: ${calculateArea(myRectangle)}`);

• The Rectangle interface defines the structure for a rectangle object.
• The calculateArea function accepts a parameter of type Rectangle and returns the area.
• The myRectangle object adheres to the Rectangle interface and is passed to the function.

Output:

Area: 50

Best Practices for Using TypeScript Object Types

• Prefer Interfaces for Object Type Definitions: Use interface to define object shapes, as they are extendable and provide clear intent.
• Utilize Type Aliases for Complex Types: Employ type aliases when defining complex types, such as unions or intersections, to enhance code readability.
• Leverage Readonly Properties: Mark properties as readonly to prevent unintended mutations, ensuring data integrity.
• Avoid Excessive Typing: Rely on TypeScript's type inference where possible to reduce redundancy and maintain cleaner code.

TypeScript Object Types - FAQs

What is the difference between object and {} in TypeScript?

The object type represents any non-primitive value, while {} refers to any value except null and undefined.

How can I define an object with dynamic keys in TypeScript?

Use index signatures to define objects with dynamic keys, specifying the key and value types.

When should I use interfaces over type aliases for object types?

Prefer interfaces for defining object shapes due to their extendability; use type aliases for complex types like unions or intersections.

Can I define optional properties in TypeScript object types?

Yes, by appending a question mark (?) to the property name, indicating that the property is optional.

How do I ensure an object's properties are immutable in TypeScript?

Use the readonly modifier to prevent reassignment of object properties, ensuring immutability.

N

nikitamehrotra99

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• Geeks Premier League
• TypeScript
• Geeks Premier League 2023

+1 More