typescript-add-generics — human mapping

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 NumberContainer {
  private value: number;
  
  constructor(value: number) {
      this.value = value;
  }
  
  getValue(): number {
      return this.value;
  }
  
  setValue(value: number): void {
      this.value = value;
  }
15}
16
17const container = new NumberContainer(42);
18

After1class Container<T> {
2    private value: T;
3    
4    constructor(value: T) {
5        this.value = value;
6    }
7    
8    getValue(): T {
9        return this.value;
10    }
11    
12    setValue(value: T): void {
13        this.value = value;
14    }
15}
16
17const numberContainer = new Container<number>(42);
18const stringContainer = new Container<string>("hello");
19

Before1class NumberContainer {
  private value: number;
  
  constructor(value: number) {
      this.value = value;
  }
  
  getValue(): number {
      return this.value;
  }
  
  setValue(value: number): void {
      this.value = value;
  }
15}
16
17const container = new NumberContainer(42);
18

After1class Container<T> {
2    private value: T;
3    
4    constructor(value: T) {
5        this.value = value;
6    }
7    
8    getValue(): T {
9        return this.value;
10    }
11    
12    setValue(value: T): void {
13        this.value = value;
14    }
15}
16
17const numberContainer = new Container<number>(42);
18const stringContainer = new Container<string>("hello");
19

Before1class NumberContainer {
  private value: number;
  
  constructor(value: number) {
      this.value = value;
  }
  
  getValue(): number {
      return this.value;
  }
  
  setValue(value: number): void {
      this.value = value;
  }
15}
16
17const container = new NumberContainer(42);
18

After1class Container<T> {
2    private value: T;
3    
4    constructor(value: T) {
5        this.value = value;
6    }
7    
8    getValue(): T {
9        return this.value;
10    }
11    
12    setValue(value: T): void {
13        this.value = value;
14    }
15}
16
17const numberContainer = new Container<number>(42);
18const stringContainer = new Container<string>("hello");
19

Before

program

class_declaration

class "class"

type_identifier "NumberContainer"

class_body

{ "{"

public_field_definition

accessibility_modifier

private "private"

property_identifier "value"

type_annotation

: ":"

predefined_type

number "number"

; ";"

method_definition

property_identifier "constructor"

formal_parameters

( "("

required_parameter

identifier "value"

type_annotation

: ":"

predefined_type

number "number"

) ")"

statement_block

{ "{"

expression_statement

assignment_expression

member_expression

this "this"

. "."

property_identifier "value"

= "="

identifier "value"

; ";"

} "}"

method_definition

property_identifier "getValue"

formal_parameters

( "("

) ")"

type_annotation

: ":"

predefined_type

number "number"

statement_block

{ "{"

return_statement

return "return"

member_expression

this "this"

. "."

property_identifier "value"

; ";"

} "}"

method_definition

property_identifier "setValue"

formal_parameters

( "("

required_parameter

identifier "value"

type_annotation

: ":"

predefined_type

number "number"

) ")"

type_annotation

: ":"

predefined_type

void "void"

statement_block

{ "{"

expression_statement

assignment_expression

member_expression

this "this"

. "."

property_identifier "value"

= "="

identifier "value"

; ";"

} "}"

lexical_declaration

const "const"

variable_declarator

identifier "container"

= "="

new_expression

new "new"

identifier "NumberContainer"

arguments

( "("

number "42"

) ")"

; ";"

After

program

class_declaration

class "class"

type_identifier "Container"

type_parameters

< "<"

type_parameter

type_identifier "T"

> ">"

class_body

{ "{"

public_field_definition

accessibility_modifier

private "private"

property_identifier "value"

type_annotation

: ":"

type_identifier "T"

; ";"

method_definition

property_identifier "constructor"

formal_parameters

( "("

required_parameter

identifier "value"

type_annotation

: ":"

type_identifier "T"

) ")"

statement_block

{ "{"

expression_statement

assignment_expression

member_expression

this "this"

. "."

property_identifier "value"

= "="

identifier "value"

; ";"

} "}"

method_definition

property_identifier "getValue"

formal_parameters

( "("

) ")"

type_annotation

: ":"

type_identifier "T"

statement_block

{ "{"

return_statement

return "return"

member_expression

this "this"

. "."

property_identifier "value"

; ";"

} "}"

method_definition

property_identifier "setValue"

formal_parameters

( "("

required_parameter

identifier "value"

type_annotation

: ":"

type_identifier "T"

) ")"

type_annotation

: ":"

predefined_type

void "void"

statement_block

{ "{"

expression_statement

assignment_expression

member_expression

this "this"

. "."

property_identifier "value"

= "="

identifier "value"

; ";"

} "}"

lexical_declaration

const "const"

variable_declarator

identifier "numberContainer"

= "="

new_expression

new "new"

identifier "Container"

type_arguments

< "<"

predefined_type

number "number"

> ">"

arguments

( "("

number "42"

) ")"

; ";"

lexical_declaration

const "const"

variable_declarator

identifier "stringContainer"

= "="

new_expression

new "new"

identifier "Container"

type_arguments

< "<"

predefined_type

string "string"

> ">"

arguments

( "("

string

" "\""

string_fragment "hello"

" "\""

) ")"

; ";"

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