javascript - example - Clases estáticas de TypeScript

typescript object

Question

Quería pasar a TypeScript desde JS tradicional porque me gusta la sintaxis tipo C #. Mi problema es que no puedo averiguar cómo declarar clases estáticas en TypeScript.

En C #, a menudo uso clases estáticas para organizar variables y métodos, poniéndolos juntos en una clase con nombre, sin necesidad de instatar un objeto. En vanilla JS, solía hacer esto con un simple objeto JS:

var myStaticClass = {
    property: 10,
    method: function(){}
}

En TypeScript, prefiero ir por mi enfoque de C-sharpy, pero parece que las clases estáticas no existen en TS. ¿Cuál es la solución adecuada para este problema?

Answer 1

Esta es una forma:

class SomeClass {
    private static myStaticVariable = "whatever";
    private static __static_ctor = (() => { /* do static constructor stuff :) */ })();
}

__static_ctor aquí es una expresión de función invocada inmediatamente. Typescript dará salida al código para llamarlo al final de la clase generada.

Actualización: para tipos genéricos en constructores estáticos, a los que ya no se les permite hacer referencia por miembros estáticos, necesitará un paso adicional ahora:

class SomeClass<T> {
    static myStaticVariable = "whatever";
    private ___static_ctor = (() => { var someClass:SomeClass<T> ; /* do static constructor stuff :) */ })();
    private static __static_ctor = SomeClass.prototype.___ctor();
}

En cualquier caso, por supuesto, puede llamar al constructor estático de tipo genérico después de la clase, como por ejemplo:

class SomeClass<T> {
    static myStaticVariable = "whatever";
    private __static_ctor = (() => { var example: SomeClass<T>; /* do static constructor stuff :) */ })();
}
SomeClass.prototype.__static_ctor();

Solo recuerda NUNCA usar this en __static_ctor arriba (obviamente).

Answer 2

Esta pregunta está bastante anticuada, pero quería dejar una respuesta que aproveche la versión actual del idioma. Desafortunadamente las clases estáticas todavía no existen en TypeScript, sin embargo, puede escribir una clase que se comporte de manera similar con solo una pequeña sobrecarga usando un constructor privado que evite la creación de instancias de clases desde el exterior.

class MyStaticClass {
    public static readonly property: number = 42;
    public static myMethod(): void { /* ... */ }
    private constructor() { /* noop */ }
}

Este fragmento le permitirá usar clases "estáticas" similares a la contraparte de C # con el único inconveniente de que aún es posible instanciarlas desde adentro. Afortunadamente, no puedes extender clases con constructores privados.

Answer 3

Estaba buscando algo similar y encontré algo llamado Singleton Pattern .

Referencia: Patrón Singleton

Estoy trabajando en una clase BulkLoader para cargar diferentes tipos de archivos y quería usar el patrón Singleton para ello. De esta forma puedo cargar archivos de mi clase de aplicación principal y recuperar los archivos cargados fácilmente desde otras clases.

A continuación se muestra un ejemplo simple de cómo puede crear un administrador de puntaje para un juego con TypeScript y el patrón Singleton.

clase SingletonClass {

private static _instance:SingletonClass = new SingletonClass();

private _score:number = 0;

constructor() {
    if(SingletonClass._instance){
        throw new Error("Error: Instantiation failed: Use SingletonDemo.getInstance() instead of new.");
    }
    SingletonClass._instance = this;
}

public static getInstance():SingletonClass
{
    return SingletonClass._instance;
}

public setScore(value:number):void
{
    this._score = value;
}

public getScore():number
{
    return this._score;
}

public addPoints(value:number):void
{
    this._score += value;
}

public removePoints(value:number):void
{
    this._score -= value;
}   }

Luego, en cualquier parte de tus otras clases, tendrías acceso al Singleton por:

var scoreManager = SingletonClass.getInstance();
scoreManager.setScore(10); scoreManager.addPoints(1);
scoreManager.removePoints(2); console.log( scoreManager.getScore() );

Answer 4

Existen clases estáticas en idiomas como C # porque no hay otras construcciones de alto nivel para agrupar datos y funciones. En JavaScript, sin embargo, lo hacen, por lo que es mucho más natural declarar un objeto como lo hizo. Para imitar más de cerca la sintaxis de la clase, puedes declarar métodos como estos:

const myStaticClass = {
    property: 10,

    method() {

    }
}

Answer 5

La definición de propiedades estáticas y métodos de una clase se describe en 8.2.1 de la especificación de lenguaje de Typescript :

class Point { 
  constructor(public x: number, public y: number) { } 
  public distance(p: Point) { 
    var dx = this.x - p.x; 
    var dy = this.y - p.y; 
    return Math.sqrt(dx * dx + dy * dy); 
  } 
  static origin = new Point(0, 0); 
  static distance(p1: Point, p2: Point) { 
    return p1.distance(p2); 
  } 
}

donde Point.distance() es un método estático (o "clase").

Answer 6

Las clases abstractas han sido un ciudadano de primera clase de TypeScript desde TypeScript 1.6. No puedes instanciar una clase abstracta.

Aquí hay un ejemplo:

export abstract class MyClass {         
    public static myProp = "Hello";

    public static doSomething(): string {
      return "World";
    }
}

const okay = MyClass.doSomething();

//const errors = new MyClass(); // Error

Answer 7

También puede usar el namespace de namespace palabras clave para organizar sus variables, clases, métodos, etc. Ver doc

namespace Validation {
    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }

    const lettersRegexp = /^[A-Za-z]+$/;
    const numberRegexp = /^[0-9]+$/;

    export class LettersOnlyValidator implements StringValidator {
        isAcceptable(s: string) {
            return lettersRegexp.test(s);
        }
    }

    export class ZipCodeValidator implements StringValidator {
        isAcceptable(s: string) {
            return s.length === 5 && numberRegexp.test(s);
        }
    }
}

Answer 8

TypeScript no es C #, por lo que no debe esperar necesariamente los mismos conceptos de C # en TypeScript. La pregunta es ¿por qué quieres clases estáticas?

En C # una clase estática es simplemente una clase que no se puede subclasificar y debe contener solo métodos estáticos. C # no permite definir funciones fuera de las clases. En TypeScript esto es posible, sin embargo.

Si está buscando una forma de poner sus funciones / métodos en un espacio de nombres (es decir, no global), podría considerar el uso de módulos de TypeScript, por ej.

module M {
    var s = "hello";
    export function f() {
        return s;
    }
}

Para que pueda acceder a Mf () externamente, pero no a s, y no puede extender el módulo.

Consulte la specification TypeScript para obtener más detalles.

Answer 9

Una forma posible de lograr esto es tener instancias estáticas de una clase dentro de otra clase. Por ejemplo:

class SystemParams
{
  pageWidth:  number = 8270;
  pageHeight: number = 11690;  
}

class DocLevelParams
{
  totalPages: number = 0;
}

class Wrapper
{ 
  static System: SystemParams = new SystemParams();
  static DocLevel: DocLevelParams = new DocLevelParams();
}

Entonces se puede acceder a los parámetros utilizando Wrapper, sin tener que declarar una instancia de este. Por ejemplo:

Wrapper.System.pageWidth = 1234;
Wrapper.DocLevel.totalPages = 10;

Entonces obtienes los beneficios del objeto tipo JavaScript (como se describe en la pregunta original) pero con los beneficios de poder agregar el tipeo TypeScript. Además, evita tener que agregar ''estático'' frente a todos los parámetros de la clase.

Answer 10

Ver http://www.basarat.com/2013/04/typescript-static-constructors-for.html

Esta es una forma de ''falsificar'' un constructor estático. No está exento de peligros: consulte el elemento Codeplex al que se hace referencia .

class Test {
    static foo = "orig";

    // Non void static function
    static stat() {
        console.log("Do any static construction here");
        foo = "static initialized";
        // Required to make function non void
        return null;
    }
    // Static variable assignment
    static statrun = Test.stat();
}

// Static construction will have been done:
console.log(Test.foo);