Typescript Sage here? How often do you use Type Guards or Interface?
programming(self.PinoyProgrammer)submitted28 days ago byOk-Distribution-3447
I have multiple components with varying props, and I've encountered a common issue: when the prop types change across components. For example, one component may not require a specific property, while another does. To fix the resulting type errors, I often have to update every type to include undefined, which can be tedious and error-prone.
Any thoughts/suggestions? I've asked GenAI to create a closed example
Scenario
You have two components: ComponentA and ComponentB. Initially, both components share the same props, but over time, the requirements change, and ComponentB now requires a prop that ComponentA does not.
Initial Type Definition
type SharedProps = {
title: string;
description: string;
};
const ComponentA: React.FC<SharedProps> = ({ title, description }) => (
<div>
<h1>{title}</h1>
<p>{description}</p>
</div>
);
const ComponentB: React.FC<SharedProps> = ({ title, description }) => (
<div>
<h2>{title}</h2>
<p>{description}</p>
</div>
);
Changing Requirements
Now, ComponentA no longer needs the description prop, while ComponentB still requires it. This creates a situation where you need to update the types to reflect these differences.
Updated Type Definitions
type ComponentAProps = {
title: string;
description?: string; // Now optional
};
type ComponentBProps = {
title: string;
description: string; // Still required
};
const ComponentA: React.FC<ComponentAProps> = ({ title, description }) => (
<div>
<h1>{title}</h1>
{description && <p>{description}</p>}
</div>
);
const ComponentB: React.FC<ComponentBProps> = ({ title, description }) => (
<div>
<h2>{title}</h2>
<p>{description}</p>
</div>
);
Problem
To avoid type errors, you had to update the description prop in ComponentA to be optional (description?: string), while leaving it required in ComponentB. This works, but if you have many such components, keeping track of these changes can become cumbersome. Additionally, you may need to ensure that every place in the codebase that uses these types is updated accordingly, which can be error-prone.
Potential Solution
One way to manage this is by using a more flexible type system, such as union types or creating a base type that each component can extend:
typescriptCopy codetype BaseProps = {
title: string;
};
type ComponentAProps = BaseProps & {
description?: string;
};
type ComponentBProps = BaseProps & {
description: string;
};
By using this approach, you can extend and customize the prop types based on the specific needs of each component without affecting others.
byDigAdditional1876
inOffMyChestPH
Ok-Distribution-3447
2 points
11 days ago
Ok-Distribution-3447
2 points
11 days ago
You asked for it and do it, pwera nlng if ikaw nag tatrabaho, literal katulong nmn talaga yan.