To divide an object into two separate objects, it is essential to specify the keys that should be included in the first output object. The following code snippet demonstrates how this can be achieved:
function split<T, K extends keyof T>(
obj: T, keys: K[]
): [Pick<T, K>, Pick<T, Exclude<keyof T, K>>] {
const pick = {} as Pick<T, K>;
const unpick = {} as Pick<T, Exclude<keyof T, K>>;
const keySet = {} as Record<K, boolean>;
keys.forEach(k => keySet[k] = true);
(Object.keys(obj) as (keyof T)[]).forEach(k => {
if (k in keySet) {
const kk = k as K;
pick[kk] = obj[kk];
} else {
const kk = k as Exclude<keyof T, K>
unpick[kk] = obj[kk];
}
});
return [pick, unpick];
}
The above function can be utilized within the render() method as shown below:
const [xp , rest] = split(this.props, ["visible", "description"]);
// xp.visible, xp.description, and rest.text
While the approach above minimizes redundancy, there is still room for improvement by avoiding repetition of key names such as "visible" and "description". This can be addressed by deriving an interface from a runtime value rather than vice versa. Here's how you can achieve this:
interface ButtonProps {
text: string;
}
const descriptiveButtonExtraProps = {
visible: true,
description: "string"
}
type DescriptiveButtonExtraProps = typeof descriptiveButtonExtraProps;
type PropertyIntersect<T, U> = { [K in keyof (T & U)]: (T & U)[K] };
interface DescriptiveButtonProps extends
PropertyIntersect<ButtonProps, DescriptiveButtonExtraProps> { };
By leveraging the derived DescriptiveButtonExtraProps value, we can obtain the list of keys required for splitting the object:
const descriptiveButtonExtraKeys = Object.keys(descriptiveButtonExtraProps) as
(keyof DescriptiveButtonExtraProps)[];
With these enhancements in place, the render() method can now be redefined as follows:
class DescriptiveButton extends React.Component<DescriptiveButtonProps, {}> {
render () {
const [xp, rest]: [DescriptiveButtonExtraProps, ButtonProps] =
split(dp, descriptiveButtonExtraKeys);
return xp.visible ? <div>{xp.description}: <Button {...rest}/></div> : <div />;
}
}
While the updated implementation provides a more concise way to handle repeated key names, it may introduce additional complexity. It's advisable to assess whether the benefits outweigh the added intricacy based on the specific requirements of your project.
Best of luck with your development endeavors!