Q:

Split interface into base and extras automatically

Let's say I have these interfaces defined as below. 
interface ButtonProps {
    text: string;
}

interface DescriptiveButtonProps extends ButtonProps {
    visible: boolean,
    description: string;
}

And, I'm trying to render a DescriptiveButton that renders a Button component using the extra properties defined in the interface. 
class DescriptiveButton extends React. Component<DescriptiveButtonProps, {}> {
    render () {
        const { visible, description, ...rest } = this.props;
        return visible ?  <div>{description}: <Button {...rest}/></div> : <div />;
    }
}

As you can see, I had to list all the extra props manually; visible, and description.  I want to split DescriptiveButtonProps into ButtonProps and the extras without having to list them all out.  Is there a way to achieve this? 

A:

If you want to split an object into two objects, you need to specify which keys you want to see in the first output object.   Something like this will work:
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];
}

You could use this inside your render() method:
const [xp , rest] = split(this.props, ["visible", "description"]);
// xp.visible, xp.description, and rest.text

This is no better than what you were already doing, since you are typing out "visible" and "description" again in an array.   But an array is easier to manipulate than variable names in a destructuring assignment, so we are on a path toward making this less redundant. 

From here, the idea is to come up with a runtime object whose keys are "visible" and "description" without needing to type them twice.   The problem is that you can't derive a value from an interface; the type system is erased at runtime.   You can do the opposite: derive an interface from a value.   Here's a way of doing it in your case:
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> { };

That might be hard to follow, but at the end, DescriptiveButtonProps is exactly what you had before, but you derived it from the value descriptiveButtonExtraProps.   And it's that value we will use to get our list of keys for splitting:
const descriptiveButtonExtraKeys = Object.keys(descriptiveButtonExtraProps) as 
  (keyof DescriptiveButtonExtraProps)[];

Finally, we can rewrite your render() method:
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 />;
  }
}

There, that's done.   

All that should work as far as it goes, but it's a bunch of extra machinery you need to lug around just to save repeating key names.   This is probably only worth it if you have lots of key names or an often-changing list of key names; you wouldn't have to keep making sure that the variable names in your destructuring assignment matched the definition of DescriptiveButtonProps.   But if you have a few properties or they don't change very often, it's probably better just to keep the code the way you have it and just be careful.   It's up to you. 
Hope that helps.   Good luck!