DEV Community: Avwerosuoghene Darhare-Igben

Shared Component Architecture in Angular (When To Abstract and When Not To)

Avwerosuoghene Darhare-Igben — Tue, 18 Nov 2025 18:15:06 +0000

One of the easiest traps in frontend development is over–engineering your shared components. You start with one neat reusable button, next thing you know, your shared folder has 40 components, half of which only get used once.

The real skill is knowing when to abstract and when to leave a component exactly where it is.

Here’s a simple, practical way to think about it.

When You Should Abstract a Component

1. The UI pattern shows up everywhere

If you keep recreating the same button style, card layout, dropdown, or modal logic across modules, abstract it. Shared UI components help maintain a tight and consistent visual identity, avoiding copy-paste chaos.

2. The component has clean inputs and outputs

Think of things like: app-button, app-card, app-avatar, app-loader. These don’t rely on any external state and don’t care which module they’re in. That’s exactly what a shared component should look like.

3. You want to avoid future refactor pain

Shared components act like a central control point. Update it once, and every feature automatically benefits. This is especially important as your app grows or when you’re building multiple frontends within the same project.

When You Should Not Abstract a Component

1. It belongs to a specific feature

If your component interacts directly with a feature-specific service, relies on domain logic, or only makes sense within a specific part of the app, keep it local.

2. The abstraction isn’t stable yet

A big mistake is abstracting too early, before you fully understand the pattern. Build the feature first. Let that pattern show up two or three times. Then extract the reusable part.

This prevents you from building a super-generic shared component that tries to solve every problem and ends up solving none.

3. It will introduce unnecessary complexity

Sometimes forcing something into a shared folder actually makes the code harder to work with. You start adding extra inputs, optional behaviors, workarounds, and conditionals, all because you tried to make one component do too much. If the component becomes more complicated after abstraction, that’s a red flag.

A Practical Guideline You Can Use Today

If a component is UI-only, stateless, and used repeatedly, put it in a shared ui folder.
If a component contains business logic or is tied to a specific feature, keep it inside the feature module.
If a component is unique, experimental, or hasn’t shown a clear repeatable pattern, don’t abstract it yet, wait until the pattern actually repeats.

Keeping your shared architecture simple doesn’t just make your Angular project clean. It also makes you faster, reduces bugs, and keeps your team from fighting unnecessary over-abstraction.

Shared Component Architecture in Angular (When To Abstract and When Not To)

Avwerosuoghene Darhare-Igben — Tue, 18 Nov 2025 18:15:06 +0000

The real skill is knowing when to abstract and when to leave a component exactly where it is.

Here’s a simple, practical way to think about it.

When You Should Abstract a Component

1. The UI pattern shows up everywhere

2. The component has clean inputs and outputs

3. You want to avoid future refactor pain

When You Should Not Abstract a Component

1. It belongs to a specific feature

If your component interacts directly with a feature-specific service, relies on domain logic, or only makes sense within a specific part of the app, keep it local.

2. The abstraction isn’t stable yet

A big mistake is abstracting too early, before you fully understand the pattern. Build the feature first. Let that pattern show up two or three times. Then extract the reusable part.

This prevents you from building a super-generic shared component that tries to solve every problem and ends up solving none.

3. It will introduce unnecessary complexity

A Practical Guideline You Can Use Today

If a component is UI-only, stateless, and used repeatedly, put it in a shared ui folder.
If a component contains business logic or is tied to a specific feature, keep it inside the feature module.
If a component is unique, experimental, or hasn’t shown a clear repeatable pattern, don’t abstract it yet, wait until the pattern actually repeats.

Keeping your shared architecture simple doesn’t just make your Angular project clean. It also makes you faster, reduces bugs, and keeps your team from fighting unnecessary over-abstraction.

How to Use GitHub Secrets Effectively in Multi-Service Deployments

Avwerosuoghene Darhare-Igben — Thu, 13 Nov 2025 20:29:32 +0000

Managing secrets across multiple services can quickly get really messy. Your API keys, database passwords, and service credentials need to be available to your CI/CD pipeline without exposing them publicly. GitHub Secrets makes this easy, but only if you use them wisely.

Here's how to handle them effectively:

1. Centralize Your Secrets

Instead of dumping everything into one place, create service-specific secrets. For example, API_SERVICE_DB_PASSWORD for your backend and FRONTEND_API_KEY for your frontend. This keeps things clear and reduces the risk of accidentally using the wrong secret.

2. Use Environment Variables in Workflows

Pull secrets into your workflow using environment variables. For instance:

This way, each service will only get the secrets it needs.

3. Don’t Overload Secrets

Avoid lumping too many secrets together. Break them down per service or environment (dev, staging, prod). This makes rotation and management much easier.

4. Rotate Secrets Regularly

Secrets are also not set-and-forget. Rotate them regularly, update them in GitHub, and redeploy services so they can incorporate the changes. Your workflow can retrieve the latest secrets from a secure vault if needed.

5. Inject Secrets Directly in Deployments

For cloud services, inject secrets at deployment rather than baking them into your images.

Example:

This way, your services get only what they need—securely.

The Bottom Line:

Keep secrets per service and environment, don’t hardcode them, and leverage GitHub Actions plus cloud secret injection. Doing this keeps your multi-service deployments secure, manageable, and stress-free.

The Hidden Gotchas When Running a Dockerized .NET App on Google Cloud Run

Avwerosuoghene Darhare-Igben — Fri, 07 Nov 2025 11:20:30 +0000

Deploying a Dockerized .NET app to Cloud Run looks simple on paper: build an image, push to Artifact Registry, and deploy. But once your app starts interacting with services like Google Cloud Storage (GCS), subtle issues start showing up.

In this post, I’ll share the hidden gotchas I discovered while debugging a real-world .NET Cloud Run deployment and how to fix them.

Gotcha 1 — Application Default Credentials (ADC) Don’t Just Work in Containers

The problem:

You might hit this error: “Your default credentials were not found. To set up Application Default Credentials”

Why it happens:

Locally, gcloud auth application default login saves credentials in your user directory. But Cloud Run runs your container in a sandbox, no user directory, no local credentials.

The fix:

Assign a Service Account to your Cloud Run service.
Give it the Storage Object Admin role.
Cloud Run automatically uses that service account for ADC.

Once that’s done, calls like GoogleCredential.GetApplicationDefault() work seamlessly.

Gotcha 2 — Verifying the Service Account Used by Cloud Run

The problem:

Developers often assume Cloud Run uses their own credentials. It doesn’t.

The fix:

In the Google Cloud Console, go to Cloud Run → your service → Security tab.
Look for Service account that’s what your app runs as.

Gotcha 3 — Generating Signed URLs for Private Buckets

Scenario:
Your app uploads files to GCS, and you need signed URLs so your frontend can access them securely.

The problem:

Signed URLs that work locally may fail on Cloud Run because your service account lacks signBlob permission.

The fix:

Add the Service Account Token Creator role.
Use: var signer = UrlSigner.FromCredential(GoogleCredential.GetApplicationDefault()); This ensures your signed URLs are generated correctly in production.

Gotcha 4 — Public vs Private Buckets

The problem:

Locally, you might test with a public bucket. But in production, GCS buckets are private by default.

Accessing an uploaded file directly shows this message: “This XML file does not appear to have any style information”. That’s GCS politely saying “Access Denied.”

The fix:

Make the bucket public. Works for testing but not recommended for production.
Use signed URLs, the secure and scalable approach. Generate time-limited signed URLs that grant temporary access to private objects.

Takeaways

Cloud Run does not inherit your local credentials.
Always verify which service account your service runs as.
Use signed URLs to safely expose private media.
Expect differences between local and Cloud Run environments, especially around GCP services.

Declarative vs. Imperative Programming in JavaScript

Avwerosuoghene Darhare-Igben — Sat, 24 Aug 2024 21:26:45 +0000

When it comes to programming methodology, two common approaches often come up: declarative and imperative programming. Each has its strengths and ideal use cases, especially in JavaScript. Let’s explore these two styles with some examples.

Imperative Programming: Telling the Computer How to Do It

Imperative programming is like giving a detailed set of instructions. You tell the computer how to achieve a specific result step by step. Think of it as guiding someone through a recipe—first do this, then do that.

Here’s a classic example of summing an array of numbers using an imperative approach:

In this example, we manually loop through the array and accumulate the sum. Each step is explicitly defined: start with 0, iterate through each number, and keep adding to the total.

Declarative Programming: Telling the Computer What You Want

Declarative programming, on the other hand, focuses on what you want to achieve rather than how to do it. You describe the desired outcome, and the underlying system figures out the steps to get there.

Let’s rewrite the same sum operation using a declarative approach:

Here, the reduce method abstracts away the loop and accumulation details. You simply declare that you want to reduce the array into a single value (the sum), and JavaScript handles the rest.

When to Use Which?

Imperative: When you need fine-grained control over each step of an operation, imperative programming is your go-to. It’s ideal for complex algorithms or when you need to optimize performance at each step.
Declarative: When clarity and simplicity are more important than control, declarative programming shines. It’s great for tasks like data transformations, UI rendering, and database queries (like SQL).

A More Practical Example: Filtering an Array

Let’s say you want to filter out even numbers from an array.

Imperative Approach:

You manually iterate over the array, check each number, and conditionally push even numbers into a new array.

Declarative Approach:

With filter, you simply declare your intention: “Give me all the numbers that are even.” The filter method handles the iteration and condition checking for you.

Conclusion

Both declarative and imperative styles have their places in TypeScript development. Imperative code can be more verbose and harder to read but offers more control. Declarative code, meanwhile, tends to be more concise and readable, making it easier to maintain.

Next time you’re coding, consider which approach best suits your needs. Do you need precise control? Go imperative. Need clear, maintainable code? Declarative might be your best bet. Happy coding!

Plan First, Code Later

Avwerosuoghene Darhare-Igben — Mon, 03 Jun 2024 13:09:59 +0000

As a software engineer, getting caught up in the excitement of writing code and building new features is pretty easy. However, successful developers understand the importance of taking the time to plan your project thoroughly. Here’s why you should always plan first and code later.

Define Clear Objectives

Setting clear objectives provides direction and purpose for your project. They help ensure everyone on the team is aligned and working towards the same goals.

Imagine you're tasked with developing a new e-commerce platform. Without clear objectives, you might focus on adding flashy features like animations and complex user interfaces. However, if your primary purpose is to increase sales, your efforts would be better spent optimizing the checkout process and improving load times.

Create a Blueprint

A well-thought-out blueprint serves as a roadmap for your project. It helps you visualize the structure and flow of your application, making it easier to identify potential issues before they arise.

Break Down Tasks

Breaking down the project into smaller, manageable tasks makes it easier to track progress and stay organized. The task of handling a large-scale project can feel overwhelming unless you effectively break it down into manageable segments. It also helps you identify dependencies and prioritize work more effectively.

For the e-commerce platform mentioned earlier, you can break down tasks into components such as user authentication, product listing, shopping cart functionality, payment processing, and order management. This way, you can tackle each component individually, ensuring thorough testing and integration.

Choose the Right Tools

The tools and technologies you choose can significantly impact your project's success. Selecting the right tools ensures your team can work efficiently and leverage their expertise effectively.

If your e-commerce app requires real-time updates, such as inventory changes and live customer support, choosing a technology like Node.js with WebSocket support would be more appropriate than a traditional request-response model. Additionally, you can never go wrong using version control tools like Git to ensure collaborative and organized code management.

Consider Scalability

Planning for scalability ensures that your application can handle increased load and growth over time. This helps avoid costly refactoring and performance issues in the future.

Plan for Testing
Incorporating testing from the beginning ensures code quality and reliability. It helps catch bugs early, reducing the cost and effort required to fix them later.

For the e-commerce app, create unit tests for individual functions like user registration and payment processing. Implement integration tests to ensure different components work together seamlessly, such as adding items to the cart and completing a purchase.

Conclusion
By investing time in thorough planning, you set a strong foundation for your project. This approach leads to cleaner, more efficient code and a smoother development process. Remember, the key to successful software development lies in thinking first and coding later.

Passing Data from Dart to JSON for Backend Integration

Avwerosuoghene Darhare-Igben — Tue, 23 Apr 2024 15:01:20 +0000

JSON (JavaScript Object Notation) provides a lightweight and simple method of data interchange, widely used in modern systems, including application development in Dart. Its simplicity, support for nested data, and language independence make it a go-to option for transmitting information across different platforms and programming languages. It serves as a means of providing dynamic web experiences through its vital role in client and server-side communications, particularly in APIs. In short, it is a vital tool used by software engineers today for data exchange in Dart-based mobile app development. This article delves into how to utilize this simple yet powerful tool to enhance the functionality and efficiency of Dart-based software.

Converting Dart Objects to JSON

When creating Dart applications, it's often necessary to transform Dart objects into JSON format to carry out tasks like transmitting data over networks or storing it in databases. Dart offers built-in support for such data transformation using the dart:convert library. This library provides utilities for serializing Dart objects into JSON and vice versa.
The serialization process involves converting Dart objects into JSON format. Dart provides a convenient way to do this using the jsonEncode() function from the dart:convert library. This function converts a Dart object into its JSON representation as a string.

The snippet above demonstrates the usage of the jsonEncode method to convert Dart data into JSON format. The SignupRequestPayload class includes a toJson method that converts the email and password Dart objects into JSON format, as evidenced by the output printed to the console.

Handling Different Data Types

When translating Dart objects into JSON, it's important to handle different data types properly. Dart supports a range of data types including strings, numbers, booleans, lists, and maps, which need to be properly converted to their JSON equivalents.

The above UniversityList class contains a list of university names of type String, the number of universities passed, which is of type int, and a boolean that indicates whether the list of universities is valid or not

Sending JSON to the Backend

After converting Dart objects to JSON, the next step is often to transmit this JSON data to a backend server for further processing or storage. Dart provides HTTP client libraries like http or dio for making HTTP requests and sending JSON data to the server.

The snippet above shows how an http request can be made to a backend server using the dart http package.
NB: Ensure the http package is installed on your project and imported to your file.

Conclusion

In conclusion, Dart provides robust support for converting Dart objects to JSON format and transmitting this JSON data to backend servers. By following the serialization process and properly handling different data types, developers can effectively work with JSON data in their Dart applications. Additionally, through HTTP requests, Dart applications can seamlessly communicate with backend systems, making it a versatile and powerful language for building web and mobile applications.

A Guide to Formatting Dates in JavaScript

Avwerosuoghene Darhare-Igben — Mon, 20 Nov 2023 13:56:51 +0000

Working with dates is a common task in web development, and JavaScript provides a powerful Date object to handle various date and time operations. Formatting dates for display is an essential aspect of creating user-friendly applications. In this guide, we'll explore different ways to format dates in JavaScript, along with code snippets and detailed explanations.

Using 'toLocaleString'

The toLocaleString method is a built-in function in JavaScript that provides a simple way to format dates based on the user's locale.

This method automatically adapts the date format based on the user's locale, providing a localized representation.

Using 'toLocaleDateString'

If you want to display only the date portion without the time, you can use the toLocaleDateString method.

Custom Formatting with 'Intl.DateTimeFormat'

The Intl.DateTimeFormat object provides a higher level of precision in date formatting, allowing you to customize both date and time formats. By specifying options with Intl.DateTimeFormat, you have the flexibility to tailor date presentations to meet your specific requirements.

Using Libraries like moment.js

The moment.js library stands out as a favored solution for managing dates and times in JavaScript. Offering a straightforward and adaptable API for date formatting, it simplifies the process.

Commence by installing moment.js through npm with the following command: npm install moment. Subsequently, incorporate it into your JavaScript code using:

Manually Formatting with get Methods

For more control over the date components, you can manually extract the date, month, and year using the get methods of the Date object.

While opting for this method grants you extensive control, it involves a more hands-on approach in managing the individual date components.

Conclusion

Picking the right way to format dates in JavaScript boils down to what suits your needs. Whether you go for the simplicity of built-in methods like toLocaleString or try out third-party options like moment.js, knowing these choices helps you create a straightforward and user-friendly date display in your web applications. Play around with these methods to find what works best for you.

Understanding "use strict" in TypeScript

Avwerosuoghene Darhare-Igben — Mon, 06 Nov 2023 19:36:14 +0000

TypeScript offers many helpful features to make coding cleaner and more reliable. In this article, we'll take a closer look at one such feature called "use strict." This feature is a simple but important part of TypeScript that can improve the quality and reliability of your code. We'll explore how "use strict" helps you follow best practices and maintain the integrity of your software projects. Let's dive into the world of "use strict" in TypeScript!

What is "use strict"?

Before we delve into how TypeScript uses "use strict," let's understand what it is. "use strict" is a directive in JavaScript that changes the way the code is interpreted. When it is applied, JavaScript operates in a more secure and structured mode. It enforces stricter parsing and error handling, making your code less prone to common coding mistakes.

Here's how to enable "use strict" in JavaScript:

"use strict" in TypeScript

In TypeScript, the use of "use strict" is a bit different from traditional JavaScript. TypeScript always assumes "use strict" by default. This means that the best practices and error prevention provided by "use strict" are already integrated into your TypeScript code without explicitly adding the directive.

Let's take a look at an example. Consider this TypeScript code snippet:

Under the hood, TypeScript transpile this code into JavaScript and ensures that "use strict" is implicitly present:

Benefits of Implicit "use strict"

The implicit "use strict" in TypeScript offers several benefits:

- Enhanced Code Quality
By enforcing stricter rules and preventing common coding mistakes, "use strict" in TypeScript helps maintain a higher level of code quality. This leads to fewer runtime errors and a more predictable code behavior.

- Improved Security
"Use strict" enhances security by preventing certain types of vulnerabilities and exploits. It reduces the risk of accidentally declaring global variables and mitigates potential security threats.

- Future-Proofing
With "use strict" implicitly enabled, your TypeScript code is more compatible with evolving JavaScript standards. You're less likely to encounter issues when adopting new language features and adhering to best practices.

When to Use "use strict" Explicitly

In most cases, TypeScript's implicit "use strict" is sufficient to ensure code quality and security. However, there may be scenarios where you want to use it explicitly. This is relevant when you're working with existing JavaScript code and want to ensure that the "use strict" directive is in place.

To use "use strict" explicitly in TypeScript, you can do the following:

By adding the directive at the top of your TypeScript file, you make it clear that you intend to enforce strict mode. It's also useful when integrating TypeScript code into projects with existing JavaScript codebases.

Conclusion

"Use strict" is a valuable feature that enhances the quality, security, and compatibility of your code. In TypeScript, it's always enabled by default, making your development experience more reliable. While you might need to use it explicitly in specific scenarios, TypeScript's implicit "use strict" is your steadfast guardian, ensuring your code remains robust and future-proof.

Step-by-Step Guide: Converting C# Object to JSON

Avwerosuoghene Darhare-Igben — Sun, 17 Sep 2023 17:31:54 +0000

Dealing with data in different formats is a routine task when working with C#. JSON (JavaScript Object Notation) is a widely used format for sharing data. It's user-friendly and computer-friendly, making it a popular choice for storing and exchanging information. In this article, we'll guide you through the process of transforming a C# object into JSON format, one step at a time.

Step 1: Create a C# Object

Let's start with a C# object you want to turn into JSON. This object could be a class instance, a collection, or any custom data structure. To illustrate, let's use a basic example: the "Person" class.

Step 2: Use a JSON Serialization Library

To make this conversion happen, you'll require a JSON serialization library. Luckily, C# comes equipped with built-in options such as Newtonsoft.Json, often referred to as JSON.NET, which enjoys widespread use in the C# community.

Getting JSON.NET on board is straightforward. You can install it using NuGet Package Manager or the built-in package manager in Visual Studio. Once installed, it's ready to be integrated into your project.

Step 3: Serialize the C# Object

Now that you have your C# object and the JSON serialization library in place, it's time to perform the actual conversion. Here's a simple example of how to serialize a Person object:

In this snippet, we first create a Person object with some sample data. Then, we use the JsonConvert.SerializeObject method provided by JSON.NET to convert the person object into a JSON string stored in the JSON variable.

Step 4: Handle Serialization Options (Optional)

JSON serialization often comes with various options. You can customize the serialization process to exclude specific properties, format dates, or handle null values differently. JSON.NET allows you to achieve this through attributes or by configuring the JsonSerializerSettings.

In this example, we customize the JSON serialization process using JsonSerializerSettings. We set NullValueHandling to Ignore, which means that any null properties in the person object will be excluded from the JSON output. We also set Formatting to Indented to make the JSON output more human-readable with proper indentation which is evident in the console display.

Conclusion

Transforming C# objects into JSON is a crucial skill for every C# developer. With handy tools like JSON.NET and the easy steps we've shared in this guide, you can effortlessly manage JSON data in your C# projects. Whether you're crafting web services, interfacing with APIs, or managing data storage, becoming adept at JSON serialization is a valuable addition to your programming toolbox.

Understanding NullReferenceException in C#

Avwerosuoghene Darhare-Igben — Tue, 29 Aug 2023 18:04:27 +0000

NullReferenceException is a common puzzler in C#. It shows up when you try to to access a member(like a property, method, or field) of a reference type variable that is currently null. Picture trying to build a house with invisible bricks – not gonna work, right? This article aims to provide a clear understanding of NullReferenceException, its causes, and practical ways to handle it.

In C#, reference types (such as classes and interfaces) can hold references to objects, or they can be assigned a special value, "null," which signifies the absence of an object reference. Attempting to access members of a null reference triggers a NullReferenceException at runtime, as the runtime environment cannot resolve the requested member on a null object.

Common Causes of NullReferenceException

- Null Returned from Method
If a method returns null and you then try to access a member or call a method on that null value, you'll come face to face with a NullReferenceException. This is because you're attempting to interact with an object that doesn't actually exist.

In the code snippet above, the GetGreeting method returns null. When you call this method and assign its result to the greeting variable, greeting becomes null.

When you then try to access the Length property of greeting, a NullReferenceException will be thrown because you're attempting to access a member of a null value.

- Missing Object Initialisation
If you create a reference type (such as a class) but forget to initialise an instance of that class before trying to access its members or methods, you will encounter a NullReferenceException.

In this code, the Person class has a property Name and a method Introduce() to introduce the person's name. However, in the Main() method, the person variable is declared but not initialised with an instance of the Person class.

When you try to call the Introduce() method on the uninitialised person variable, a NullReferenceException will be thrown because person is null, and you can't call methods on a null reference

Preventing NullReferenceException

By employing proactive measures and careful coding practices, it's possible to prevent these exceptions. Let's consider some of the ways this can be achieved.

- Null-Conditional Operator
This operator allows us to safely access members of an object that might be null, without causing a NullReferenceException.

In this code, the ? operator ensures that if person is null, the value of name will also be null. If person is not null, name will hold the value of the Name property.

- Null Coalescing Operator:
The ?? Operator is a handy feature that allows you to provide a default value when dealing with null values.

In this code, the ?? operator allows us to provide a default value ("Default Name") if person?.Name is null. If person is not null, the value of the Name property will be used.

- Conditional Statements:
Conditional statements like if-else provide another option for handling null values.

In this code, an if-else statement is used to check whether the Name property of the person object is null. If this condition is met, the value of person.Name is assigned to the name variable; otherwise, if person is null or person.Name is null, the name variable is set to "Default Name".

Conclusion:

NullReferenceException is a common challenge in C# programming, often arising from attempting to access members of null reference type variables. By using null-safe operators, null coalescing, null checks, and conditional statements, you can prevent these exceptions and write more robust and reliable code. Understanding the nuances of null values and handling them proactively will enhance your programming skills and contribute to better software development practices

Interfaces vs Types in TypeScript: Understanding the Differences

Avwerosuoghene Darhare-Igben — Wed, 23 Aug 2023 15:18:10 +0000

In TypeScript, creating custom data structures involves two key players: interfaces and types. These tools, although similar, have specific roles and benefits. This article delves into the practical aspects of interfaces and types, exploring their features and suggesting optimal situations for their application. Let's uncover the nuanced world of TypeScript's essential building blocks.

Interfaces

Interfaces are primarily used to define the shape of objects or classes. They act as contracts that specify which properties an object must have and their respective types. Interfaces are ideal for maintaining consistent structures across various parts of your codebase.

In this scenario, the Furniture interface ensures that any object assigned to the chair variable adheres to the required properties and types.

Types

Types offer a more versatile approach to defining custom types. While they can define object shapes just like interfaces, their true power lies in handling unions, intersections, tuples, and complex type compositions.

The example code above creates custom types for managing furniture-related data.It defines FurnitureID for IDs that can be either strings or numbers. FurniturePiece describes furniture properties like color, newness, and width. FurnitureWithDimensions extends FurniturePiece to include height and depth. FurnitureOwner includes ID and name for furniture owners, while FurnitureShop contains details about the shop manager and staff.

Making the Choice Between Interfaces and Types

- Interfaces
Choose interfaces when you want to lay out how objects should be built and make sure everyone follows the same rules. This helps keep your code neat and easy to understand, making it simpler to manage and work together on. Interfaces give your code a solid base, making it easier for different parts to work well together.

- Types
Go for types when things get more complicated, like dealing with combinations, overlaps, special rules, or conditions. Types are your go-to for handling intricate situations, giving you more freedom in defining how things should behave. For instance, you can use types to describe different kinds of data in a detailed and adaptable way

Although interfaces and types serve different purposes, they can sometimes be used interchangeably. Your decision between them should be based on your project's needs and your coding preferences. If you want well-defined object layouts, go for interfaces. For complex type handling, types are your choice.

Conclusion

Interfaces and types are essential tools in TypeScript to ensure your code has the right types. Knowing their differences helps you choose wisely. Whether you're creating basic shapes or handling complex types, TypeScript's interfaces and types offer the flexibility and structure for strong and manageable code.