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.
Now let's undersatnd this with the help of example:
JavaScript
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));
Output:
Hello, Alice!
In this example:
- 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.
Defining a Car Object
A car can be represented as an object in TypeScript by specifying its properties and their types. This ensures the object always follows a defined structure.
JavaScript
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}.`);
Output:
I drive a 2022 Tesla Model S.
In this example:
- 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.
Nested Object Types for a Book
In TypeScript, objects can contain other objects as properties, allowing us to model more complex structures.
JavaScript
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}`);
Output:
TypeScript Basics by Jane Doe
In this example:
- 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.
Function Parameter with Object Type
In TypeScript, functions can accept objects as parameters, and specifying an object type ensures the function receives the expected structure.
JavaScript
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)}`);
Output:
Area: 50
In this example:
- 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.
Explore
TypeScript Tutorial
8 min read
TypeScript Basics
TypeScript primitive types
TypeScript Object types
TypeScript other types
TypeScript combining types
TypeScript Assertions
TypeScript Functions
TypeScript interfaces and aliases
TypeScript classes