Constructor

Clase 6 de 25 • Curso de TypeScript: Programación Orientada a Objetos y Asincronismo

Clase anteriorSiguiente clase

Irving Juárez

student•

En nuestro caso deberia ser "Bob the Constructor"

Rubén Ernesto Aragón Gil

student•

jajajaja

Milton Castañeda

student•

Se pasannn....jjajajja

Axel Enrique Galeed Gutierrez

student•

Les comparto mis apuntes. :D

Constructor

Es el constructor en el que construimos la instancia y mandamos los parámetros por defecto por el cual queremos que se inicialice esa instancia a un objeto.

Sintaxis de las propiedades del constructor

TypeScript nos ayuda con las clases.

Sintaxis anterior

class ClassName {
		property1: dataType;
		propertyN: dataType;
		constructor (property1: dataType, propertyN: dataType) {
				this.proterty1 = property1;
				this.protertyN = propertyN;
		}
}

Nueva sintaxis en TypeScript

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

Cabe destacar que debemos de aclarar o ser explícitos con el alcance de las propiedades, caso contario no podremos usar 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 constructor.

class ClassName {
		constructor (
				scope property1: dataType, 
				scope propertyN: dataType
		) {
				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 que tiene un valor por defecto.

class ClassName {
		constructor (
				scope property1: dataType = value, 
				scope propertyN: dataType = value
		) {
				statements
		}
}

Código de la clase

type PartOfTheCalendar = 'day' | 'month'| 'year';

export class MyDate {
    // year: number;
    // private month: number;
    // #day: number;

    constructor (
        public year: number = 1993,
        public month: number = 7,
        private day: number = 3
    ) {
        // this.year = year;
        // this.month = month;
        // this.#day = day;
    }

    printFormat (): string {
        const { year } = this;
        const day = this.#addPadding(this.day);
        const month = this.#addPadding(this.month);
        return `${day}/${month}/${year}`;
    }

    add (amount: number, type: PartOfTheCalendar) {
        if (type === 'day') this.day += amount;
        if (type === 'month') this.month += amount;
        if (type === 'year') this. year += amount;
    }

    #addPadding (value: number) {
        if (value < 10) return `0${value}`;
        return `${value}`;
    }
}

const myDate = new MyDate(2020);
const myDate2 = new MyDate(2021);
console.log({myDate});
console.log(myDate.printFormat());

Ronaldo Delgado

student•

Gracias por el aporte!

Migdualy Alejandra Gonzalez Martinez

student•

En el constructor debes colocar de forma explicita el tipo de acceso si es público o privado.

Miguel Angel Reyes Moreno

student•

O también protegido con la palabra protected

Rodrigo Roldan

student•

Buenas, cómo hago si quisiera enviar sólo el día por ejemplo? Por ejemplo algo asi y el resto dejarlo por defecto: const myDate2 = new MyDate(day:2); Me dice 'Cannot find name month'. Gracias!!

Nicolas Molina

teacher•

Hola, esta es una buena pregunta porque por ejemplo así funciona Python, en este caso no tenemos esa habilidad si quisieras enviar solo el día y este está como tercer parámetro si o si te toca enviar el año y el mes, podrías enviar el año y mes en null y evaluar que cuando lleguen en null asignes algo por defecto, pero no es muy limpio.

Cayo Legal

student•

No se podría enviando un objeto?

Brahyan Antonio Martinez Madera

student•

Js solo fue amor de una noche XD, con ts me caso

Gilbert Ardila

student•

para obtener la fecha actual como lo hace la api Date() pero mejorando el tema del mes cero podemos hacerlo así:

<
constructor(private year: number = new Date().getFullYear(),
    private month: number = new Date().getMonth() +1,
    private day: number = new Date().getDate(),) {};
>

Miguel Angel Reyes Moreno

student•

Constructor

Podemos acortar el constructor de esta forma:

export class MyDate {
  //! aquí sí es obligatorio escribir el modificador de acceso
  constructor(
    public year: number = 1998, //* valor por defecto
    public month: number = 1,
    public day: number = 1
  ) {}
}

Jesus Daniel Castro Flores

student•

Injection dependencies en Angular esta fuertemente relacionado con esto, se usa el atajo para no escribir codigo de más.

Andrés Felipe Eslava Zuluaga

student•

En TS todo debe realizarse más explícito. Y es muy bueno!

Javier Hernando Suarez Pachon

student••

Mas funcional con fecha actual por defecto !!

let date = new Date();
class MyDate {
  constructor(
    private year: number = date.getFullYear(),
    private month: number = date.getMonth() + 1,
    private day: number = date.getUTCDate(),
  ) {}

  private addPading(value: number): string {
    return value &lt; 10 ? `0${value}` : `${value}`;
  }

  public getDateYYYYMMDD(): string {
    const day = this.addPading(this.day);
    const month = this.addPading(this.month);
    return `${this.year}/${month}/${day}`;
  }

  public add(amount: number, type: "days" | "month" | "years") {
    if (type === "days") {
      this.day += amount;
    }
    if (type === "month") {
      this.month += amount;
    }
    if (type === "years") {
      this.year += amount;
    }
  }
  //aca los retorno para que se puedan usar a nivel de logs...
  public getDay(): number {
    return this.day;
  }
  public getMonth(): number {
    return this.month;
  }
  public getYear(): number {
    return this.year;
  }
}

let myDate = new MyDate();
console.log(`()=&gt;`, myDate.getDateYYYYMMDD());

let myDate2 = new MyDate(2023);
console.log(`(2023)=&gt;`, myDate2.getDateYYYYMMDD());

let myDate3 = new MyDate(2023, 10);
console.log(`(2023, 10)=&gt;`, myDate3.getDateYYYYMMDD());

let myDate4 = new MyDate(2023, 10, 15);
console.log(`(2023, 10, 15)=&gt;`, myDate4.getDateYYYYMMDD());

Alvaro Olarte

student•

Hay que colocar explicitamente el acceso, si no se coloca el modificador de acceso (public/private/readonly), TypeScript no automatiza la creación y asignación de la propiedad en la clase; solo recibe el parámetro, pero no lo asigna automáticamente como propiedad.

Dario Mendoza

student•

En TypeScript, un constructor es un método especial de una clase que se invoca al crear una instancia de la clase. Su función principal es inicializar propiedades de la clase y ejecutar cualquier código necesario para preparar el objeto. Se define usando la palabra clave constructor, y puede recibir parámetros para asignar valores a las propiedades de la clase.

Ejemplo:

class Persona {
    nombre: string;

    constructor(nombre: string) {
        this.nombre = nombre;
    }
}

const persona = new Persona("Juan");

En este ejemplo, el constructor asigna el nombre "Juan" a la propiedad nombre de la instancia persona.

Paola Alapizco

student•

En TypeScript es posible hacer una sobrecarga el constructor así como en otros lenguajes como Java o C#? :thinking:

Adriana Paredes Salinas

student•

Sí, en TypeScript es posible hacer sobrecarga de constructores, al igual que en otros lenguajes de programación como Java o C#. La sobrecarga de constructores nos permite definir múltiples versiones del constructor con diferentes parámetros, lo que nos brinda flexibilidad para crear instancias del objeto de diferentes formas.

Para lograr la sobrecarga de constructores en TypeScript, debemos definir varias firmas de constructor en la clase. Cada firma de constructor debe tener una lista diferente de parámetros.

Cristian Ignacio Zuñiga Medina

student•

te acaban de dar una respuesta sacada de chat gpt jajaja

Alfonso Neil Jiménez Casallas

student•

tan simpático el constructor XD

Enrique Sardon Manrique

student•

una pregunta: esa asignación resumida, tambien funciona en javascript? porque al momento de compilarlo me salio el código completo en JS

export class MyDate {
  
  constructor(
    private year: number,
    private month: number,
    private day: number
    ){}

class MyDate {
    year;
    month;
    day;
    constructor(year, month, day) {
        this.year = year;
        this.month = month;
        this.day = day;
    }
}

Ronaldo Delgado

student•

Gracias por el video, ahora entiendo mas sobre la funcionalidad del constructor

Diego Raciel Ortega Hernandez

student•

TS es maravilloso!

type PartOfTheCalendar = 'day' | 'month'| 'year';

export class MyDate {
    // year: number;
    // private month: number;
    // #day: number;

    constructor (
        public year: number = 1993,
        public month: number = 7,
        private day: number = 3
    ) {
        // this.year = year;
        // this.month = month;
        // this.#day = day;
    }

    printFormat (): string {
        const { year } = this;
        const day = this.#addPadding(this.day);
        const month = this.#addPadding(this.month);
        return `${day}/${month}/${year}`;
    }

    add (amount: number, type: PartOfTheCalendar) {
        if (type === 'day') this.day += amount;
        if (type === 'month') this.month += amount;
        if (type === 'year') this. year += amount;
    }

    #addPadding (value: number) {
        if (value < 10) return `0${value}`;
        return `${value}`;
    }
}

const myDate = new MyDate(2020);
const myDate2 = new MyDate(2021);
console.log({myDate});
console.log(myDate.printFormat());

export class MyDate {
  //! aquí sí es obligatorio escribir el modificador de acceso
  constructor(
    public year: number = 1998, //* valor por defecto
    public month: number = 1,
    public day: number = 1
  ) {}
}

let date = new Date();
class MyDate {
  constructor(
    private year: number = date.getFullYear(),
    private month: number = date.getMonth() + 1,
    private day: number = date.getUTCDate(),
  ) {}

  private addPading(value: number): string {
    return value &lt; 10 ? `0${value}` : `${value}`;
  }

  public getDateYYYYMMDD(): string {
    const day = this.addPading(this.day);
    const month = this.addPading(this.month);
    return `${this.year}/${month}/${day}`;
  }

  public add(amount: number, type: "days" | "month" | "years") {
    if (type === "days") {
      this.day += amount;
    }
    if (type === "month") {
      this.month += amount;
    }
    if (type === "years") {
      this.year += amount;
    }
  }
  //aca los retorno para que se puedan usar a nivel de logs...
  public getDay(): number {
    return this.day;
  }
  public getMonth(): number {
    return this.month;
  }
  public getYear(): number {
    return this.year;
  }
}

let myDate = new MyDate();
console.log(`()=&gt;`, myDate.getDateYYYYMMDD());

let myDate2 = new MyDate(2023);
console.log(`(2023)=&gt;`, myDate2.getDateYYYYMMDD());

let myDate3 = new MyDate(2023, 10);
console.log(`(2023, 10)=&gt;`, myDate3.getDateYYYYMMDD());

let myDate4 = new MyDate(2023, 10, 15);
console.log(`(2023, 10, 15)=&gt;`, myDate4.getDateYYYYMMDD());

Constructor

Introducción

¿Ya tomaste el Curso de TypeScript: Tipos Avanzados y Funciones?

Fundamentos de POO

Class

Métodos

Acceso público

Acceso privado

Constructor

Getters

Setters

POO Avanzada

Herencia

Acceso protegido

Static

Interfaces

Clases abstractas

Singleton: constructor privado

Asincronismo y consumo de APIs

Promesas

Tipando respuestas HTTP

Proyecto: migración de funciones a clases

Consumiendo ProductMemoryService

ProductHttpService

Consumiendo ProductHttpService

Genéricos

Generics

Generics en clases

Generics en métodos

Decoradores

Próximos pasos

¿Quieres más cursos de TypeScript?