Diferencias entre JavaScript y TypeScript en patrones de diseño

Clase 5 de 27 • Curso de Patrones de Diseño en JavaScript

Resumen

¿Qué diferenciaciones marcan JavaScript y TypeScript en la implementación del patrón Singleton?

El patrón Singleton es una práctica comúnmente discutida en el mundo del desarrollo de software. Al abordar las diferencias entre JavaScript y TypeScript en este contexto, encontramos que TypeScript ofrece ciertas ventajas valiosas para los desarrolladores orientados a sistemas tipados. El hecho de que TypeScript permita usar la palabra reservada private para atributos y métodos es una de las diferencias más destacadas, diferenciándose de JavaScript donde estas características deben ser gestionadas de manera diferente.

Por ejemplo, en TypeScript, podemos definir el constructor de la clase como privado. Esto significa que solo se puede acceder y utilizar dentro de la misma clase, proporcionando un mayor control sobre las instancias creadas:

class SingletonTS {
  private static instance: SingletonTS;

  private constructor() {
    // Constructor privado
  }

  public static getInstance(version: string): SingletonTS {
    if (!SingletonTS.instance) {
      SingletonTS.instance = new SingletonTS();
    }
    return SingletonTS.instance;
  }
}

¿Cómo afectan los tipos en TypeScript?

TypeScript aporta el concepto de tipos estáticos al mundo JavaScript. Esto permite a los desarrolladores especificar el tipo de dato que se espera, mejorando significativamente el auto-documentado del código y reduciendo el margen de error. En el ejemplo anterior, se puede observar cómo se define que la función getInstance recibe una cadena (string) y devuelve una instancia de SingletonTS.

Ventajas del tipado estático en TypeScript:

Prevención de errores tempranos: La verificación de tipos ayuda a identificar errores durante el tiempo de desarrollo.
Legibilidad del código: Facilita la comprensión y mantenimiento del código al dejar en claro qué datos se esperan o se retornan.
Autodocumentación: Contribuye a que el código sea su propia documentación, útil al trabajar en equipos.

¿Por qué utilizar TypeScript para patrones de diseño?

Aunque TypeScript no convierte al JavaScript en un lenguaje obsoleto, ofrece ventajas atractivas al trabajar con patrones de diseño. La claridad de las declaraciones de tipo y las sentencias como interface, implement, private, y public permiten una implementación más robusta y clara del patrón Singleton.

Beneficios al usar TypeScript para patrones de diseño:

Mayor claridad en la estructura de código: Las declaraciones explícitas ayudan a seguir convenciones de diseño más estrictas.
Mejor mantenimiento: Un sistema tipado hace más fácil el mantenimiento del código a largo plazo.
Compatible con sistemas más complejos: Se adapta mejor a sistemas que requieren configuración de tipos más robusta, similar a lenguajes fuertemente tipados como Java o C++.

¿Los patrones de diseño en TypeScript son la única opción hoy?

Es crucial entender que trabajar con TypeScript es una de las tantas herramientas que se pueden utilizar en desarrollo moderno. La elección entre TypeScript y JavaScript debe ser informada por las necesidades específicas del proyecto. TypeScript ofrece beneficios claros en términos de sistema de tipos y claridad para patrones de diseño, pero JavaScript sigue siendo totalmente válido y efectivo para proyectos donde se requieren mayor flexibilidad o menor sobrecarga.

El uso de TypeScript puede ser especialmente relevante en proyectos complejos o de gran escala, donde los errores son costosos y la claridad del código es fundamental para la colaboración en equipo. Sin embargo, en contextos más ágiles o prototipos rápidos, JavaScript podría seguir siendo la opción preferida debido a su simplicidad y menor curva de aprendizaje.

Bienvenido al mundo del desarrollo con TypeScript, donde la calidad del software y la claridad del código son protagonistas. Y si consumes clases o cursos sobre patrones de diseño utilizando TypeScript, estarás posicionándote para ser un desarrollador aún más eficaz y versátil. Continuar aprendiendo y explorando nuevas herramientas es parte esencial de la evolución profesional en la programación. ¡Sigue adelante!

Alina Salinas Mendoza

student•

Estaria genial que el proximo curso de patrones de diseño el codigo se realice en TS, ya que ahi se cuentan con las palabras reservadas static, private, etc, que vienen de la POO, y los patrones de diseño van muy de la mano con POO y las interfaces! aunque tampoco esta mal ver como se implementa en Js para comparar con un lagibilidad las sencilla.

Pero por mi parte le doy un punto a TypeScript!!

Daniel Basulto

teacher•

Tomanding nota de tus comentarios Alina, gracias!

Irving Juárez

student•

¿Porqué no existe la palabra reservada private en JS?

Los patrones de diseño fueron creados pensando en lenguajes con soporte para POO. El problema es que JS es un lenguaje donde las clases no existen, sino que más bien son los prototipos los que nos permiten tener un comportamiento similar al de las clases. Es por esa razón que hay ciertas cosas que muchos lenguajes POO si tienen que JS no. . Pero TS soluciona el problema, cierto? En realidad no. Aunque nos de un error en el editor de texto, si se puede usar el operador new (aún con el error). Sin embargo, TS nos da esa pauta para entender mejor que esta haciendo el código y aunque por debajo el error no se solucione. Sabemos que en términos sintácticos hubo un error.

Daniel Basulto

teacher•

Gran respuesta Irving, como siempre dando catedra.

Gerardo Castillo

student•

Opino que aplicar patrones en JS sin TS, es como estar en una fiesta sin música 🎶... Tienes una ventaja muy clara con TS, un código más legible y encima el editor te ayuda con intelliSense. Pero cierto que para efectos didácticos es bueno ver en ambas maneras para contrastar. Sobre el Singleton, veo que es prácticamente crear una única instancia de una clase lo cual va un poco en contra de la filosofía de crear clases que es justamente poder hacer muchas instancias de objetos a partir de la clase. Pero en este caso el beneficio real es como encapsular todo dentro de la clase y meter el candado para evitar que accidentalmente puedas duplicar el estado global de una app por ejemplo.

Daniel Basulto

teacher•

Yo estoy del lado de elegir lo que funcione mejor para darle una solucion al problema, sin embargo, agregarle la capa de seguridad y de DX que TS te proporciona es algo siempre bueno cuando las condiciones se prestan.

Angel Santillan Brambila

student•

Asi como Daniel Basulto comento creo depende mucho de en que vas a solucionar, en proyectos pequeño a veces por velocidad js sera mejor opcion ya que no tendrás que realizar todos los "tramites" que TS te obligara a hacer permitiendo dar soluciones mas rápidas a cosas simples o en situaciones donde quieres optimizar un punto del codigo a tal nivel que TS solo representa una carga de optimización. En cambio en aplicaciones muy grandes con muchas personas trabajando al mismo tiempo en el proyecto TS se vuelve tu mejor amigo ya que evita muchos dolores de cabeza a futuro. Esto te lo comento desde mi experiencia como desarrollador Front-end donde he trabajado en aplicaciones sin usar ninguna librería y tener que realizar mis propias implementaciones desde cero (Por temas de seguridad y temas de aprobación para certificaciones) a tener un proyecto enorme donde trabajamos mas de 40 front-end solo en la parte del cliente

Enrique Aguilera

student•

interface Singleton {
    instance: Singleton
    version: string
    getInstance(version: Singleton['version']): Singleton
}

class Singleton implements Singleton {
    private static instance: Singleton | undefined = undefined
    
    public version: string

    private constructor(version: string) {
        this.version = version
    }

    public static getInstance(version: string): Singleton {
        if(!Singleton.instance) Singleton.instance = new Singleton(version)

        return Singleton.instance
    }
}

function appSingleton() {
    const singleton1 = Singleton.getInstance('1')
    const singleton2 = Singleton.getInstance('2')
    const singleton3 = Singleton.getInstance('3')

    console.log(`singleton1 es igual a singleton2? : ${singleton1 === singleton2}`)
    console.log(`singleton2 es igual a singleton3? : ${singleton2 === singleton3}`)
}

appSingleton()

Daniel Basulto

teacher•

Bien Enrique!! Buen trabajo!

Alvaro Eduardo Garzón Pira

student•

¡Hola! Estaría super tener otro curso de patrones de diseño, como el de comportamiento o estructurales en lenguajes como Java y Python, esto para no quedarnos con la idea del mismo lenguaje, ¡Gracias!

Daniel Basulto

teacher•

Quizás haya planes para uno de los lenguajes que mencionas Alvaro, chan chan chan!

Hiram Rodriguez Gomez

student•

Comparto la versión del Singleton del ejemplo, realizado en Java:

import java.io.*;

public class Singleton {
    
    private String version;
    static Singleton instance = null;
    
    private Singleton(String version){
        this.version = version;
    }
    
    public static Singleton getInstance(String version){
        if (Singleton.instance == null){
            Singleton.instance = new Singleton(version);
        }
        return instance;
    }
    
    public static void main(String[] args){
        Singleton singleton1 = Singleton.getInstance("version1");
        Singleton singleton2 = Singleton.getInstance("version2");
        
        System.out.println(singleton1 == singleton2);
    }
}

Daniel Basulto

teacher•

Excelso!

Karen Yarely Rojo Valenzuela

student•

Hola, en mi caso no tengo experiencia usando Js ni Ts, por lo tanto no puedo dar una opinión muy acertada. Pero coincido con otro comentario que leí aquí mismo, respecto a que es bueno contrastar ambos estilos para tener conocimiento en caso de que nos toque trabajar solo con JS o con TS.

Daniel Basulto

teacher•

Genial Karen, al ver esto consideras que te han entrado ganas e interés por hacer JS/TS?

Manuel José Urdaneta Escalona

student•

/**
 * Patron Singleton
 * 
 */
export default class Singleton {
    // se define la instancia estatica del tipo de la clase
    private static instance: Singleton;
    public version: string;

    // para un singleton es necesario un constructor privado
    private constructor( version: string) {
        this.version = version;
    }

    // a traves de los metodos estaticos no permitimos que se puedan crear nuevas instancias usando new 
    public static getInstance(version: string): Singleton {
        // se verifica si la instancia ya fue creada
        if (!Singleton.instance) {
            //  si no fue creada se crea
            Singleton.instance = new Singleton(version);
        }

        // se retorna la instancia
        return Singleton.instance;
    }

    public static updateVersion(version: string): Singleton {
        if (!Singleton.instance) {
            throw new Error('Singleton is not initialized');
        }
        Singleton.instance.version = version;
        return Singleton.instance;

    }

}

Este es mi ejemplo en ts agregue tambien una funcion paracambiar la version

William Andres Tovar Riobo

student•

Estoy deacuerdo con realizar los cursos con TypeScript, personalmente creo que hace el codigo mas facilmente legible y evita algunas malas practicas y comportamientos inesperados.

Platzi Team

student•

https://runts.acbc.dev/

les queria compartir este web que e creado para ejecutar JS/TS

Stephanie Martha Peñaloza Cortés

student•

Sí, curso con TypeScript!

Rodrigo Angel Zucchini

student•

class ConexionDataBaseTS {
    private static instance: ConexionDataBaseTS;
    private conexionString: string

    private constructor(conexionString: string) {
        this.conexionString = conexionString;
    }

    static getInstance(conexionString: string): ConexionDataBaseTS {
        if(!ConexionDataBaseTS.instance){
            ConexionDataBaseTS.instance = new ConexionDataBaseTS(conexionString);
        } else {
            console.log("Usando la conexión existente.");
        }
        return ConexionDataBaseTS.instance;
    }
}

function appSingleton() {
    const conexionDataBase1 = ConexionDataBaseTS.getInstance("cadena-de-conexion-1");
    console.log(conexionDataBase1);

    const conexionDataBase2 = ConexionDataBaseTS.getInstance("cadena-de-conexion-2");
    console.log(conexionDataBase2);

    console.log(conexionDataBase1 === conexionDataBase2)
}

appSingleton();
```class ConexionDataBaseTS {    private static instance: ConexionDataBaseTS;    private conexionString: string
    private constructor(conexionString: string) {        this.conexionString = conexionString;    }
    static getInstance(conexionString: string): ConexionDataBaseTS {        if(!ConexionDataBaseTS.instance){            ConexionDataBaseTS.instance = new ConexionDataBaseTS(conexionString);        } else {            console.log("Usando la conexión existente.");        }        return ConexionDataBaseTS.instance;    }}
function appSingleton() {    const conexionDataBase1 = ConexionDataBaseTS.getInstance("cadena-de-conexion-1");    console.log(conexionDataBase1);
    const conexionDataBase2 = ConexionDataBaseTS.getInstance("cadena-de-conexion-2");    console.log(conexionDataBase2);
    console.log(conexionDataBase1 === conexionDataBase2)}
appSingleton();

Johan Garzón

student•

Me gustaría aclarar que si existe manera de hacer que una variable sea privada en javascript agregando el caracter '#' antes de declarar el nombre de la variable o función un ejemplo sería:

class Singleton {

static #instance = undefined

constructor( version ) {

this.#version = version

}

static getInstance( version ) {

if ( !Singleton.#instance ) {

Singleton.#instance = new Singleton( version )

}

return Singleton.#instance

}

Cabe decir que en JS no se puede declarar como privado el constructor como si se puede en TS

Kyb3r Cipher

student•

Ahora tengo ganas de aprender TS

Daniel Andres Rojas Paredes

student•

estaria cool, pero que no se enseñen los mismos que ya se vieron en js

Juan Esteban Mejia Ortiz

student•

Lo mismo pero en Python

class Singleton:

    _instance = None

    def __new__(cls, *args, **kwargs):
        if not cls._instance:
            cls._instance = super().__new__(cls, *args, **kwargs)
        return cls._instance


my_instance = Singleton()
print(my_instance)

another_instance = Singleton()
print(another_instance)

Daniel Basulto

teacher•

Bien Juan, como comentario, recuerda que la idea de los constructores es hacer que su implementacion sea lo mas sencillo posible y este enfocado a la configuración de la instancia.

Es por lo anterior que se opta por crear una nueva funcion para encargarse de la admin de la instancia creada.

Diferencias entre JavaScript y TypeScript en patrones de diseño

Introduccion

Patrones de Diseño Creacionales en Software

Patrones Creacionales: Singleton, Factory, Abstract Factory, Builder, Prototype

Singleton

Patrón Singleton: Implementación y Uso en Programación Orientada a Objetos

Diagrama de Clases del Patrón Singleton en JavaScript