Skip to content

Suggested refactoring: move function/type/class to new file #13859

Description

I suggest adding a refactoring/code fix that helps with the task of moving a class/function/type or other top level declaration out of the current file and into another file, updating references as needed.

Motivation
Often when starting out with a new feature it makes sense to start to write code in a single file while working out the design. However, as soon as long method bodies start getting implemented or when code gets checked in to version control, it makes less sense and gets harder to work with and you want to move top level members into separate files.

I've found CodeRush and ReSharper's "Move Type to File" tool (for VS/C#) very useful in this workflow and I miss it greatly when working with TypeScript/VS Code.

Example

before:

// MyView.ts

class MyListItem { 
   // ...
} 

export default class MyView {
   myItems: MyListItem[];
   // ...
}

after invoking "Move declaration to file" on MyListItem:

// MyListItem.ts
export default class MyListItem { 
   // ...
} 

// MyView.ts
import MyListItem from "./MyListItem";

export default class MyView {
   myItems: MyListItem[];
   // ...
}

Design

  • I suggest that this type of feature should require as little input as possible, ideally just be a single shortcut without dialogs, generating an appropriately named file.
  • It needs to take module configuration into consideration (i.e. should import/export be generated or not)
  • Should generate .tsx extension as appropriate, either based on the file it is invoked in or the contents of the code transferred.

Edit: removed parenthesis after class names

Activity

  1. markusjohnsson commented on Feb 27, 2017

    @markusjohnsson
    ContributorAuthor

    Is this something that could be considered for inclusion in the compiler, or is it out of scope and should instead be suggested as a plug-in to editors/IDE's?

  2. added
    SuggestionAn idea for TypeScript
    Domain: LS: Refactoringse.g. extract to constant or function, rename symbol
    DuplicateAn existing issue was already created
    and removed
    Domain: LS: Refactoringse.g. extract to constant or function, rename symbol
    SuggestionAn idea for TypeScript
    on Feb 27, 2017
  3. mhegazy commented on Feb 27, 2017

    @mhegazy
    Contributor

    Should be covered by #6487

  4. markusjohnsson commented on Feb 27, 2017

    @markusjohnsson
    ContributorAuthor

    Well, it's not about moving a file but moving a declaration out of one file into another. I guess a lot of the mechanics of updating references will be the same, but is it the same?

  5. mhegazy commented on Feb 27, 2017

    @mhegazy
    Contributor

    will leave both then.

  6. added
    SuggestionAn idea for TypeScript
    Domain: LS: Refactoringse.g. extract to constant or function, rename symbol
    and removed
    DuplicateAn existing issue was already created
    on Feb 27, 2017
  7. locked and limited conversation to collaborators on Jul 31, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Domain: LS: Refactoringse.g. extract to constant or function, rename symbolFixedA PR has been merged for this issueSuggestionAn idea for TypeScript

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions