Please enable JavaScript.

Coggle requires JavaScript to display documents.

13: TypeScript classes - Coggle Diagram

13: TypeScript classes

class fields

declaring

class User {
  constructor(fName: string, lName: string) {
    this.firstName = fName;
    this.lastName = lName;
  }
}

will fail!

Property 'firstName' does not exist on type 'User'.

in TypeScript

class User {
  firstName: string;
  lastName: string;
  constructor(fName: string, lName: string) {
    this.firstName = fName;
    this.lastName = lName;
  }
}

initialising

class User {
  firstName: String;
  lastName: string;
  state = 'happy';
  constructor(fName: string, lName: string) {
    this.firstName = fName;
    this.lastName = lName;
  }
}

- - - - for all fields & methods
      - can choose to provide them
        
        but don't have to
    - - only exists in TypeScript
      - even though concept exists in JavaScript
  - - - only exists in TypeScript
      - even though concept exists in JavaScript
  - - - only exists in TypeScript
      - concept does not exist in JavaScript
    - - or any sub-classes

constructor shortcut

class User {
  readonly firstName: String;
  readonly lastName: string;
  private state = 'happy';
  constructor(fName: string, lName: string) {
    this.firstName = fName;
    this.lastName = lName;
  }
}

becomes

class User {
  private state = "happy";
  constructor(
    readonly firstName: string,
    readonly lastName: string
  ) {}
}

interfaces

interface Employee {
  id: number;
}

interface Identity {
  passportNumber: number;
}

class User implements Employee, Identity {
  protected state = "happy";

  constructor(
    readonly firstName: string,
    readonly lastName: string,
    public id: number,
    public passportNumber: number
  ) {}
...
}

abstract classes

abstract class Employee {
  constructor(public id: number) {}
  work() {  <- this is your FUNCTIONALITY
    // do some work
  }
  abstract getPay(): number;
}

class User extends Employee {
  protected state = "happy";

  constructor(
    readonly firstName: string,
    readonly lastName: string,
    id: number
  ) {
    super(id);
  }
}

won't compile

> Non-abstract class 'User' does not implement 
  all abstract members of 'Employee'