Classes estáticas TypeScript

Eu queria passar para o TypeScript a partir do JS tradicional porque gosto da sintaxe semelhante ao c #. Meu problema é que não consigo descobrir como declarar classes estáticas no TypeScript.

Em C #, geralmente uso classes estáticas para organizar variáveis ​​e métodos, reunindo-os em uma classe nomeada, sem a necessidade de instanciar um objeto. No vanilla JS, eu costumava fazer isso com um objeto JS simples:

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

No TypeScript, prefiro minha abordagem C-sharpy, mas parece que as classes estáticas não existem no TS. Qual é a solução apropriada para esse problema?

O TypeScript não é C #, portanto você não deve esperar necessariamente os mesmos conceitos de C # no TypeScript. A questão é por que você quer classes estáticas?

No C #, uma classe estática é simplesmente uma classe que não pode ser subclassificada e deve conter apenas métodos estáticos. O C # não permite definir funções fora das classes. No TypeScript, isso é possível, no entanto.

Se você estiver procurando uma maneira de colocar suas funções / métodos em um espaço para nome (por exemplo, não global), considere usar os módulos do TypeScript, por exemplo

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

Para que você possa acessar Mf () externamente, mas não se você não pode estender o módulo.

Veja a especificação TypeScript para mais detalhes.

As classes abstratas são cidadãos de primeira classe do TypeScript desde o TypeScript 1.6. Você não pode instanciar uma classe abstrata.

Aqui está um exemplo:

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

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

const okay = MyClass.doSomething();

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

A definição de propriedades e métodos estáticos de uma classe é descrita em 8.2.1 da Especificação de linguagem do tipo de texto :

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); 
  } 
}

onde Point.distance()é um método estático (ou "classe").

Essa pergunta é bastante antiga, mas eu queria deixar uma resposta que aproveite a versão atual do idioma. Infelizmente, as classes estáticas ainda não existem no TypeScript. No entanto, você pode escrever uma classe que se comporte de maneira semelhante, com apenas uma pequena sobrecarga, usando um construtor privado que impede a instanciação de classes de fora.

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

Esse trecho permitirá que você use classes "estáticas" semelhantes à contraparte do C #, com a única desvantagem de que ainda é possível instanciar as mesmas a partir de dentro. Felizmente, embora você não possa estender classes com construtores particulares.

Esta é uma maneira:

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

__static_ctoraqui está uma expressão de função imediatamente chamada. O texto datilografado produzirá um código para chamá-lo no final da classe gerada.

Atualização: para tipos genéricos em construtores estáticos, que não podem mais ser referenciados por membros estáticos, você precisará de uma etapa extra agora:

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

De qualquer forma, é claro, você poderia chamar o construtor estático do tipo genérico após a classe, como:

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

Basta lembrar de uso NUNCA thisno __static_ctoracima (obviamente).

Recebi o mesmo caso de uso hoje (31/07/2018) e achei que isso era uma solução alternativa. É baseado em minha pesquisa e funcionou para mim. Expectativa - Para obter o seguinte no TypeScript:

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

Eu fiz isso:

//MyStaticMembers.ts
namespace MyStaticMembers {
        class MyStaticClass {
           static property: number = 10;
           static myMethod() {...}
        }
        export function Property(): number {
           return MyStaticClass.property;
        }
        export function Method(): void {
           return MyStaticClass.myMethod();
        }
     }

Portanto, consumiremos como abaixo:

//app.ts
/// <reference path="MyStaticMembers.ts" />
    console.log(MyStaticMembers.Property);
    MyStaticMembers.Method();

Isso funcionou para mim. Se alguém tiver outras sugestões melhores, deixe-nos ouvir! Obrigado...

Classes estáticas em linguagens como C # existem porque não há outras construções de nível superior para agrupar dados e funções. No JavaScript, no entanto, eles fazem e, portanto, é muito mais natural declarar um objeto como você. Para imitar mais de perto a sintaxe da classe, você pode declarar métodos como este:

const myStaticClass = {
    property: 10,

    method() {

    }
}

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

Essa é uma maneira de "falsificar" um construtor estático. Não é sem seus perigos - veja o item codeplex mencionado .

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);

Uma maneira possível de conseguir isso é ter instâncias estáticas de uma classe dentro de outra classe. Por exemplo:

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();
}

Em seguida, os parâmetros podem ser acessados ​​usando o Wrapper, sem ter que declarar uma instância dele. Por exemplo:

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

Portanto, você obtém os benefícios do objeto de tipo JavaScript (conforme descrito na pergunta original), mas com os benefícios de poder adicionar a digitação TypeScript. Além disso, evita a necessidade de adicionar 'estático' na frente de todos os parâmetros da classe.

Com os módulos externos ES6, isso pode ser alcançado da seguinte maneira:

// privately scoped array
let arr = [];

export let ArrayModule = {
    add: x => arr.push(x),
    print: () => console.log(arr),
}

Isso evita o uso de módulos internos e namespaces, considerados maus práticas pelo TSLint [1] [2] , permite escopo privado e público e evita a inicialização de objetos de classe indesejados.

Eu estava procurando por algo semelhante e me deparei com algo chamado Singleton Pattern .

Referência: Singleton Pattern

Estou trabalhando em uma classe BulkLoader para carregar diferentes tipos de arquivos e queria usar o padrão Singleton para isso. Dessa forma, posso carregar arquivos da minha classe principal do aplicativo e recuperar os arquivos carregados facilmente de outras classes.

Abaixo está um exemplo simples de como você pode criar um gerenciador de pontuação para um jogo com TypeScript e o padrão Singleton.

classe 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;
}   }

Em qualquer lugar de suas outras classes, você teria acesso ao Singleton por:

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

Você também pode usar palavras namespace- chave para organizar suas variáveis, classes, métodos e assim por diante. Veja 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);
        }
    }
}