Fundamentos de POO

Clases

class MyDate {
  year: number
  month: number
  day: number

  constructor(year: number, month: number, day: number) {
    this.year = year
    this.month = month
    this.day = day
  }
}

Metodos

Los metodos describen el comportamiento de los objetos, se les conoce tambien como funciones.

class MyDate {
	// Code
	printFormat(): string {
    return `Año: ${this.year} Mes: ${this.month} Dia: ${this.day}`
  }
  add(amount: number, type: "days" | "months" | "years") {
    type === "days" ? this.day += amount : ''
    type === "months" ? this.month += amount : ''
    type === "years" ? this.year += amount : ''
  }
}

const myDate = new MyDate(2016, 6, 12);
myDate.printFormat();  // Año: 2016 Mes: 6 Dia: 12

myDate.add(6, "years");
myDate.printFormat();  // Año: 2022 Mes: 6 Dia: 12

Acceso público

El acceso publico nos permite acceder a las propiedades y métodos del objeto desde el exterior.

Por defecto, todas las propiedades y métodos son públicos pero si queremos hacerlo de manera explicita podemos utilizar la palabra reservada public.

class MyDate {
  public year: number
  public month: number
  day: number

  constructor(year: number, month: number, day: number) {
    // Code
  }
	public printFormat(): string {
    // Code
  }
  add() {
    // Code
  }
}

const myDate = new MyDate(2016, 6, 12)

// Se pueden usar estos metodos fuera de la clase
myDate.add();
myDate.printFormat();

La desventaja de esto es que estás pueden ser accesibles y modificadas desde fuera de la clase.

Acceso privado

Podemos proteger nuestras propiedades y métodos para que nos sean accedidos y modificados por fuera de clase.

Con la palabra reservada private o con # estamos restringiendo el acceso de nuestros parámetros y métodos, solo podrán ser accedidos o modificados dentro de la clase.

class MyDate {
  // Code
  private day: number

  constructor(year: number, month: number, day: number) {
    // Code
  }
	#addPadding(value: number): string {
    if (value < 10) {
      return `0${value}`
    }

    return `${value}`
  }
  getDay(): number {
    return this.day
  }
	printFormat(): string {
    const day = this.#addPadding(this.day)
    const month = this.#addPadding(this.month)

    return `${this.year}/${month}/${day}`
  }
  add() {
    // Code
  }
}

const myDate = new MyDate(2016, 6, 12)

console.log(myDate.getDay());
console.log(myDate.printFormat());

// No se pueden acceder fuera de la clase
// myDate.day;
// myDate.#addPadding(12);

Constructor

El constructor es donde construimos las propiedades de la clase y mandamos los parámetros por defecto por el cual queremos que se inicialice la instancia de un objeto.

Sintaxis anterior

class ClassName {
	property1: dataType;
	p1ropertyN: dataType;

	constructor (property1: number, propertyN: string) {
		this.proterty1 = property1;
		this.protertyN = propertyN;
	}
}

Sintaxis en TypeScript

De esta forma estaríamos definiendo y asignando las propiedades de una manera corta.

Debemos ser explícitos con el scope de las propiedades (añadir si es public o private), de lo contrario no funcionaria esta característica de TypeScript, además que no podremos usar esa propiedad a lo largo de la clase, ya que su scope solo se verá limitado al mismo constructor.

class ClassName {
	constructor (
		public property1: number,
		private propertyN: string
	) {
		statements
	}
}

Valores por defecto

Al tener valores por defecto, al momento de crear una instancia de esa clase ya no es obligatorio pasar ese parámetro.

classClassName {
	constructor (
		public property1: number = 7,
		private propertyN: string = 'something'
	) {
		statements
	}
}

Getters

Con get tenemos acceso a una propiedad y metodos con un scope privado. Se conocen tambien como variables computadas, ya que puede tomar propiedades y metodos para retornar un algo nuevo (siempre deben retornar algo) y luego obtener ese valor como una propiedad mas de la instancia, pero no podemos modificarlos o mutarlos.

class ClassName {
	constructor () {
			statements
	}

	get variableComputed() {
		statements
		return something;
	}
}