Prompt
When property names are known at development time, use direct property access (e.g., object.property) over computed property access (e.g., object[propertyName]). This approach enhances code readability, enables better IDE autocompletion, improves type checking, and makes the code more maintainable.
Example - Instead of:
output[propName] = clsx(
defaultProps?.[propName] as string,
props?.[propName] as string,
);
output[propName] = {
...(defaultProps?.[propName] ?? ({} as React.CSSProperties)),
...(props?.[propName] ?? ({} as React.CSSProperties)),
};
Prefer:
output.className = clsx(
defaultProps.className,
props.className,
);
output.style = {
...defaultProps.style,
...props.style,
};
This approach eliminates unnecessary dynamic property access, type assertions, and optional chaining when the property name is statically known. Code becomes more concise and the intent is clearer.