typescript-refactor-interface

A painting is a person's account of this edit as text, recorded independently of the node mapping - a rendering often has several equally defensible answers where the mapping has one. Deletions and insertions carry no position on the opposite side in a painting, so that panel draws no caret for them.

Before1class User {
  constructor(public name: string, public email: string) {}
  
  getName(): string {
      return this.name;
  }
  
  getEmail(): string {
      return this.email;
  }
11}
12
13class Admin {
  constructor(public name: string, public email: string) {}
  
  getName(): string {
      return this.name;
  }
  
  getEmail(): string {
      return this.email;
  }
23}
24

After1interface Person {
  name: string;
  email: string;
  getName(): string;
  getEmail(): string;
6}
7
8class User implements Person {
  constructor(public name: string, public email: string) {}
  
  getName(): string {
      return this.name;
  }
  
  getEmail(): string {
      return this.email;
  }
18}
19
20class Admin implements Person {
  constructor(public name: string, public email: string) {}
  
  getName(): string {
      return this.name;
  }
  
  getEmail(): string {
      return this.email;
  }
30}
31

Before1class User {
  constructor(public name: string, public email: string) {}
  
  getName(): string {
      return this.name;
  }
  
  getEmail(): string {
      return this.email;
  }
11}
12
13class Admin {
  constructor(public name: string, public email: string) {}
  
  getName(): string {
      return this.name;
  }
  
  getEmail(): string {
      return this.email;
  }
23}
24

After1interface Person {
  name: string;
  email: string;
  getName(): string;
  getEmail(): string;
6}
7
8class User implements Person {
  constructor(public name: string, public email: string) {}
  
  getName(): string {
      return this.name;
  }
  
  getEmail(): string {
      return this.email;
  }
18}
19
20class Admin implements Person {
  constructor(public name: string, public email: string) {}
  
  getName(): string {
      return this.name;
  }
  
  getEmail(): string {
      return this.email;
  }
30}
31

Before1class User {
  constructor(public name: string, public email: string) {}
  
  getName(): string {
      return this.name;
  }
  
  getEmail(): string {
      return this.email;
  }
11}
12
13class Admin {
  constructor(public name: string, public email: string) {}
  
  getName(): string {
      return this.name;
  }
  
  getEmail(): string {
      return this.email;
  }
23}
24

After1interface Person {
  name: string;
  email: string;
  getName(): string;
  getEmail(): string;
6}
7
8class User implements Person {
  constructor(public name: string, public email: string) {}
  
  getName(): string {
      return this.name;
  }
  
  getEmail(): string {
      return this.email;
  }
18}
19
20class Admin implements Person {
  constructor(public name: string, public email: string) {}
  
  getName(): string {
      return this.name;
  }
  
  getEmail(): string {
      return this.email;
  }
30}
31

Before

program

class_declaration

class "class"

type_identifier "User"

class_body (+66 nodes collapsed)

class_declaration

class "class"

type_identifier "Admin"

class_body (+66 nodes collapsed)

After

program

interface_declaration

interface "interface"

type_identifier "Person"

interface_body

{ "{"

property_signature

property_identifier "name"

type_annotation

: ":"

predefined_type

string "string"

; ";"

property_signature

property_identifier "email"

type_annotation

: ":"

predefined_type

string "string"

; ";"

method_signature

property_identifier "getName"

formal_parameters

( "("

) ")"

type_annotation

: ":"

predefined_type

string "string"

; ";"

method_signature

property_identifier "getEmail"

formal_parameters

( "("

) ")"

type_annotation

: ":"

predefined_type

string "string"

; ";"

} "}"

class_declaration

class "class"

type_identifier "User"

class_heritage

implements_clause

implements "implements"

type_identifier "Person"

class_body (+66 nodes collapsed)

class_declaration

class "class"

type_identifier "Admin"

class_heritage

implements_clause

implements "implements"

type_identifier "Person"

class_body (+66 nodes collapsed)

Keybindings

j / k: next / previous visible node (tree panels)
h / l: collapse / expand the focused node
g / G: jump to first / last visible node
Tab: switch focus between Before/After panels
/: search: jump to next node whose text contains a given string
a: jump the other panel to this node's mapped counterpart
i: hide identical matches, showing only inserted/deleted/updated nodes and their ancestors
v: cycle the view: split / code only / tree only
p: cycle what the code view renders: the node mapping, then each human painting
r: mark this fixture as reviewed, or forget the mark (kept in this browser only)
n: open a random fixture not yet marked as reviewed
?: toggle this help