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.
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.
Enter the URL of a public GitHub repository