TypeScript Object Types

By: Rajesh P.S.

TypeScript objects are powerful tools for structuring and organizing data in your programs. They offer several advantages over plain JavaScript objects:

Improved Type Safety: TypeScript objects enforce type checks on properties, preventing assigning incompatible values and leading to fewer runtime errors.
Enhanced Readability: Object properties with clear types make code easier to understand and maintain, improving collaboration and code comprehension.
Increased Maintainability: Well-defined objects facilitate easier refactoring and code evolution by providing a structured representation of data.

Types of TypeScript Objects

There are two main types of TypeScript objects:

Object literals

These are defined using curly braces and key-value pairs, similar to JavaScript objects.

const person: { name: string; age: number; } = { name: "Bobby Moore", age: 30, };

Running the TypeScript compiler (tsc) will generate the following JavaScript code:

Continue Reading...

const person = { name: "Bobby Moore", age: 30, };

Objects based on interfaces

Interfaces define the expected structure of an object, including property names and their types.

interface User { id: number; username: string; email: string; } const user: User = { id: 1, username: "bobbymoore", email: "bobbymoore@example.com", };

Running the TypeScript compiler (tsc) will generate the following JavaScript code:

const user = { id: 1, username: "bobbymoore", email: "bobbymoore@example.com", };

Accessing Object Properties

Object properties can be accessed using dot notation or bracket notation.

const name = person.name; // Dot notation const age = person["age"]; // Bracket notation

Object Methods

Object methods are functions defined within an object that operate on its data.

const person = { name: "Bobby Moore", age: 35, greet(): string { return `Hello, my name is ${this.name}`; }, }; const message = person.greet(); // Outputs "Hello, my name is Bobby Moore"

Optional Properties

interface Car { brand: string; model: string; year?: number; // Optional property } let myCar: Car = { brand: "Toyota", model: "Camry", };

The year property is marked as optional using the ? symbol, allowing an object to be created without specifying this property.

Readonly Properties

interface Point { readonly x: number; readonly y: number; } let point: Point = { x: 10, y: 20 }; // point.x = 30; // Error: Cannot assign to 'x' because it is a read-only property.

Properties marked as readonly can only be assigned a value when the object is created and cannot be modified afterward.

Object Destructuring

let { name, age } = myDog; console.log(name); // Output: Buddy console.log(age); // Output: 3

Destructuring allows extracting individual properties from an object and assigning them to variables.

Nested Objects

interface Address { street: string; city: string; } interface Person { name: string; age: number; address: Address; } let user: Person = { name: "Bob", age: 28, address: { street: "123 Main St", city: "Anytown", }, };

Running the TypeScript compiler (tsc) will generate the following JavaScript code:

let user = { name: "Bob", age: 28, address: { street: "123 Main St", city: "Anytown", }, };

Objects can contain nested objects, creating a hierarchical structure for representing more complex data.

Spread Operator

let car = { make: "Honda", model: "Civic" }; let updatedCar = { ...car, year: 2022 }; console.log(updatedCar); // Output: { make: 'Honda', model: 'Civic', year: 2022 }

The spread operator (...) can be used to create a new object by copying properties from an existing one and adding or overriding properties.

Running the TypeScript compiler (tsc) will generate the following JavaScript code:

let car = { make: "Honda", model: "Civic" }; let updatedCar = Object.assign(Object.assign({}, car), { year: 2022 }); console.log(updatedCar); // Output: { make: 'Honda', model: 'Civic', year: 2022 }

Best Practices | TypeScript Objects

Utilize interfaces: Define clear interfaces for your objects to improve type safety and code structure.
Document your objects: Use comments to explain the purpose and expected behavior of your objects.
Organize your objects: Group related properties and methods into logical sections for better readability.
Favor immutability: Consider using immutable objects to avoid unexpected data modifications.

Conclusion

TypeScript objects are structures used to organize and represent data through key-value pairs. They can be defined with specific types, include optional and readonly properties, have methods, and support features like object destructuring and the spread operator, offering a flexible and powerful way to model and manipulate complex data in the language.

Next > TypeScript String

Related Topics

More Related Topics.....