Klasy statyczne TypeScript

Chciałem przejść do TypeScript z tradycyjnego JS, ponieważ podoba mi się składnia podobna do C #. Mój problem polega na tym, że nie mogę dowiedzieć się, jak zadeklarować klasy statyczne w TypeScript.

W języku C # często używam klas statycznych do organizowania zmiennych i metod, umieszczając je razem w nazwanej klasie, bez konieczności tworzenia obiektu. W waniliowym JS robiłem to za pomocą prostego obiektu JS:

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

W TypeScript wolałbym raczej wybrać moje podejście C-sharpy, ale wydaje się, że klasy statyczne nie istnieją w TS. Jakie jest właściwe rozwiązanie tego problemu?

TypeScript nie jest C #, więc nie należy oczekiwać tych samych koncepcji języka C # w TypeScript. Pytanie brzmi, dlaczego chcesz klas statycznych?

W języku C # klasa statyczna jest po prostu klasą, której nie można tworzyć podklasy i musi zawierać tylko metody statyczne. C # nie pozwala na definiowanie funkcji poza klasami. W TypeScript jest to jednak możliwe.

Jeśli szukasz sposobu na umieszczenie funkcji / metod w przestrzeni nazw (tj. Nie globalnej), możesz rozważyć użycie modułów TypeScript, np.

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

Abyś mógł uzyskać dostęp do Mf () z zewnątrz, ale nie s, i nie możesz rozszerzyć modułu.

Aby uzyskać więcej informacji, zobacz specyfikację TypeScript .

Klasy abstrakcyjne były pierwszorzędnym obywatelem języka TypeScript od czasu TypeScript 1.6. Nie można utworzyć wystąpienia klasy abstrakcyjnej.

Oto przykład:

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

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

const okay = MyClass.doSomething();

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

Definiowanie statycznych właściwości i metod klasy jest opisane w 8.2.1 Specyfikacji języka 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); 
  } 
}

gdzie Point.distance()jest metodą statyczną (lub „klasową”).

To pytanie jest dość przestarzałe, ale chciałem zostawić odpowiedź, która wykorzystuje aktualną wersję języka. Niestety, klasy statyczne nadal nie istnieją w TypeScript, jednak można napisać klasę, która zachowuje się podobnie z niewielkim narzutem, używając prywatnego konstruktora, który zapobiega tworzeniu instancji klas z zewnątrz.

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

Ten fragment pozwoli ci na użycie "statycznych" klas podobnych do ich odpowiedników w C #, z tą jedyną wadą, że nadal jest możliwe utworzenie ich od wewnątrz. Na szczęście nie można jednak rozszerzać klas za pomocą prywatnych konstruktorów.

To jest jeden sposób:

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

__static_ctortutaj jest natychmiast wywołane wyrażenie funkcyjne. Typescript wyświetli kod wywołujący go na końcu wygenerowanej klasy.

Aktualizacja: W przypadku typów ogólnych w konstruktorach statycznych, do których statyczne elementy członkowskie nie mogą już odwoływać się, potrzebujesz teraz dodatkowego kroku:

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

W każdym razie, oczywiście, możesz po prostu wywołać konstruktor statyczny typu ogólnego po klasie, na przykład:

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

Pamiętaj tylko, aby NIGDY nie używać thisw __static_ctorpowyższym (oczywiście).

Dzisiaj (31/07/2018) otrzymałem ten sam przypadek użycia i stwierdziłem, że jest to obejście. Jest oparty na moich badaniach i zadziałał dla mnie. Oczekiwanie - aby osiągnąć następujące wyniki w języku TypeScript:

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

Ja to zrobiłem:

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

Dlatego konsumujemy go jak poniżej:

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

To zadziałało dla mnie. Jeśli ktoś ma inne lepsze sugestie, niech nas wszyscy o tym posłuchają !!! Dzięki...

Klasy statyczne w językach takich jak C # istnieją, ponieważ nie ma innych konstrukcji najwyższego poziomu do grupowania danych i funkcji. Jednak w JavaScript tak się dzieje, więc o wiele bardziej naturalne jest po prostu zadeklarowanie obiektu, tak jak to zrobiłeś. Aby dokładniej naśladować składnię klasy, możesz zadeklarować takie metody:

const myStaticClass = {
    property: 10,

    method() {

    }
}

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

Jest to sposób na „sfałszowanie” statycznego konstruktora. Nie jest to pozbawione niebezpieczeństw - zobacz przywoływany element codeplex .

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

Jednym z możliwych sposobów osiągnięcia tego jest posiadanie statycznych instancji klasy w innej klasie. Na przykład:

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

Następnie można uzyskać dostęp do parametrów za pomocą Wrappera, bez konieczności deklarowania jego instancji. Na przykład:

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

Otrzymujesz więc zalety obiektu typu JavaScript (jak opisano w oryginalnym pytaniu), ale z korzyściami wynikającymi z możliwości dodania pisania TypeScript. Ponadto unika się konieczności dodawania słowa „static” przed wszystkimi parametrami w klasie.

Dzięki zewnętrznym modułom ES6 można to osiągnąć w następujący sposób:

// privately scoped array
let arr = [];

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

Zapobiega to użyciu wewnętrznych modułów i przestrzeni nazw, co jest uważane za złą praktykę przez TSLint [1] [2] , pozwala na prywatne i publiczne określanie zakresu oraz zapobiega inicjalizacji niechcianych obiektów klas.

Szukałem czegoś podobnego i trafiłem na coś, co nazywa się Singleton Pattern .

Odniesienie: Singleton Pattern

Pracuję nad klasą BulkLoader, aby załadować różne typy plików i chciałem użyć do tego wzorca Singleton. W ten sposób mogę ładować pliki z mojej głównej klasy aplikacji i łatwo pobierać załadowane pliki z innych klas.

Poniżej znajduje się prosty przykład, jak utworzyć menedżera wyników dla gry z TypeScript i wzorcem Singleton.

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

Następnie w każdym miejscu na innych zajęciach uzyskasz dostęp do Singleton poprzez:

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

Możesz również użyć słowa kluczowego namespacedo uporządkowania zmiennych, klas, metod i tak dalej. Zobacz dok

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