Extract Class

Is this request related to a problem? Please describe.

Often when I’m refactoring, I find a hidden class. A collection of functions and properties that would be better in a new class or in another existing class.

Describe the solution you’d like

I’d like to be able to select a function or more, maybe even some variables, and extract it out to a new class. I’d also like for all existing calls to those functions to now be prepended with the new class.

Additional context

For example, I’d like to turn this:

class Foo () {
  barSize: int = 30;
  fooString: string = "baz";

  doFoo () {
    console.log(fooString);
  }

  doBar() {
    return barSize /2;
  }

  doubleBar() {
    return barSize *2;
  }
}

class Baz() {
  Foo.doBar();
  Foo.doFoo();
}

into this:

class Foo () {
  fooString: string = "baz";

  doFoo () {
    console.log(fooString);
  }
}

class Bar() {
  barSize: int = 30;
  
  doBar() {
    return barSize /2;
  } 

  doubleBar() {
    return barSize *2;
  }
}

class Baz() {
  Bar.doBar();
  Foo.doFoo();
}

Being able to then move it into a new file would be a nice bonus.

[nicoespeon]

@avik-so I’m glad to tell you that, after so much time, this was implemented thanks to @justerest 🎉

If I take your example:

class Foo {
  barSize: number = 30;
  fooString: string = "baz";

  doFoo () {
    console.log(this.fooString);
  }

  doBar() {
    return this.barSize /2;
  }

  doubleBar() {
    return this.barSize *2;
  }
}

class Baz {
  foo = new Foo();

  doBaz() {
    this.foo.doBar();
    this.foo.doFoo();
  }
}

Executing “Extract Class” on Foo will pop up this modal to ask for the things you want to extract:

And will generate such code:

class Foo {
  private extractedClass: ExtractedClass = new ExtractedClass();

  get barSize(): number {
    return this.extractedClass.barSize;
  }

  fooString: string = "baz";

  doFoo() {
    console.log(this.fooString);
  }

  doBar() {
    return this.extractedClass.doBar();
  }

  doubleBar() {
    return this.extractedClass.doubleBar();
  }
}

class ExtractedClass {
  barSize: number = 30;

  doBar() {
    return this.barSize / 2;
  }

  doubleBar() {
    return this.barSize * 2;
  }
}

class Baz {
  foo = new Foo();

  doBaz() {
    this.foo.doBar();
    this.foo.doFoo();
  }
}

Note that Baz hasn’t change. To preserve the existing behavior, everything was preserved on Foo. So the next steps for you is to progressively adapt the clients to use the new class instead, so you can finally get rid of the things in Foo and effectively complete the refactoring.

The good thing is that all the part of creating a new class and moving the stuff is done automatically, without breaking the code.

The ExtractedClass is generated in the same file. We might enhance that later though, door is open to iterations.

[nicoespeon]

After giving a second thought about it, I think it’s easier than I thought.

We don’t actually need to index the project to do this refactoring, as I thought when I created https://github.com/nicoespeon/abracadabra/issues/46

Actually, all the information are contained in one file. Then, it’s relatively easy to put the extracted class into another file and import it.

I will consider implementing this feature sooner than I first thought.