Skip to main content

Class

Javascript Class​

class Person{
  constructor(name,age){
    this.name = name;
	this.age = age;
  }
  greet(){
    return `Hello ${this.name}`;
  }
}
const jim = new Person('Jimmy',25);
jim.greet();

Public and Private Fields​

class Person{
  score=0;		//public field
  #numLives = 10;	//private field
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  greet(){
    return `Hello ${this.name}`;
  }
}
const jim = new Person('Jimmy',25);
console.log(jim);

Getter​

class Person{
  #score=0;
  constructor(first,last){
    this.first = first;
	this.last = last;
  }
  get fullname(){return `${this.first} ${this.last}`;}
  get score(){return this.#score;}
}
const jim = new Person('Jimmy','Fallon');
console.log(jim.fullName);
console.log(jim.score);

Setter​

class Person{
  #score=0;
  constructor(first,last){
    this.first = first;
	this.last = last;
  }
  set score(newVal){this.#score=newVal;}
}
const jim = new Person('Jimmy','Fallon');
jum.score=7;
console.log(jim.score);

Extending Class​

class Person{
  constructor(name,age){
    this.name = name;
	this.age = age;
  }
}
class Boss extends Person{
  isAdmin=true;
}
const jim = new Admin('Jimmy',25);

Super​

class Person{
  constructor(name,age){
    this.name = name;
	this.age = age;
  }
}
class Boss extends Person{
  constructor(first,last,canRaise){
    super(first,last);
    this.canRaise = canRaise;
  }
}
const jim = new Admin('Jimmy',25,true);

Typescript Class​

class Person{
  first:string;
  last:string;
  greet = () => string;
  constructor(first:string,last:string){
    this.first = first;
	this.last = last;
  }
  greet=()=>{
    return `Hello ${this.name}`;
  }
}
const jim = new Person('Jimmy','Fallon');
jim.greet();

Shorthand​

  • can define inline in the constructor parameters
class Person{
  constructor(public first:string,public last:string){}
}
const jim = new Person('Jimmy','Fallon');

Private Property​

  • private properties or methods is only accessible within the class
class Person{
  first:string;
  private last:string; 
  constructor(first:string,last:string){
    this.first = first;
    this.last = last;
  }
}
const jim = new Person('Jimmy','Fallon');
console.log(jim.last);		//will not work because it is private property

Getter and Setter​

class Person{
  first:string;
  last:string;
  score:number = 0;
  constructor(first:string,last:string){
    this.first = first;
    this.last = last;
  }
  get score = ()=>{return this.score;}
  set score = (newVal:number)=>{this.score=newVal;}
}
const jim = new Person('Jimmy','Fallon');
jim.score = 98;
jim.score;

Protected Property​

  • protected properties can be accessed in child class
class Person{
  first:string;
  protected last:string; 
  constructor(first:string,last:string){
    this.first = first;
    this.last = last;
  }
}
class Admin:Person{
  public isAdmin:boolean = true;
  constructor(first:string,last:string),isAdmin:boolean){
	 super(first:string,last:string);
	 this.isAdmin = isAdmin;
  }
}
const jim = new Admin('Jimmy','Fallon');

Interface​

//we can use interface as a guide to define our class
interface Colorful{
  color:string;
}
class Rainbow implements Colorful{
  constructor(public color:string){}
}
class Shirt implements Colorful{
  constructor(public brand:string,public color:string){}
}

const myrain1:Rainbow('red');
const myshirt:Shirt('GAP','yellow');