Statische TypeScript-Klassen

Ich wollte von herkömmlichem JS zu TypeScript wechseln, weil mir die C # -ähnliche Syntax gefällt. Mein Problem ist, dass ich nicht herausfinden kann, wie statische Klassen in TypeScript deklariert werden.

In C # verwende ich häufig statische Klassen, um Variablen und Methoden zu organisieren und sie in einer benannten Klasse zusammenzufügen, ohne ein Objekt instanziieren zu müssen. In Vanilla JS habe ich dies mit einem einfachen JS-Objekt gemacht:

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

In TypeScript würde ich lieber meinen C-Sharpy-Ansatz wählen, aber es scheint, dass statische Klassen in TS nicht existieren. Was ist die geeignete Lösung für dieses Problem?

TypeScript ist nicht C #, daher sollten Sie nicht unbedingt dieselben Konzepte von C # in TypeScript erwarten. Die Frage ist, warum Sie statische Klassen wollen?

In C # ist eine statische Klasse einfach eine Klasse, die nicht in Unterklassen unterteilt werden kann und nur statische Methoden enthalten darf. Mit C # können keine Funktionen außerhalb von Klassen definiert werden. In TypeScript ist dies jedoch möglich.

Wenn Sie nach einer Möglichkeit suchen, Ihre Funktionen / Methoden in einen Namespace (dh nicht global) zu stellen, können Sie die Module von TypeScript verwenden, z

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

Damit Sie extern auf Mf () zugreifen können, aber nicht auf s, und Sie können das Modul nicht erweitern.

Weitere Informationen finden Sie in der TypeScript- Spezifikation .

Abstrakte Klassen sind seit TypeScript 1.6 ein erstklassiger Bürger von TypeScript. Sie können eine abstrakte Klasse nicht instanziieren.

Hier ist ein Beispiel:

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

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

const okay = MyClass.doSomething();

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

Das Definieren statischer Eigenschaften und Methoden einer Klasse wird in 8.2.1 der Typescript-Sprachspezifikation beschrieben :

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

Wo Point.distance()ist eine statische (oder "Klasse") Methode.

Diese Frage ist ziemlich veraltet, aber ich wollte eine Antwort hinterlassen, die die aktuelle Version der Sprache nutzt. Leider gibt es in TypeScript noch keine statischen Klassen. Sie können jedoch eine Klasse schreiben, die sich mit nur geringem Aufwand ähnlich verhält, indem Sie einen privaten Konstruktor verwenden, der die Instanziierung von Klassen von außen verhindert.

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

Mit diesem Snippet können Sie "statische" Klassen verwenden, die dem C # -Gleichstück ähnlich sind, mit dem einzigen Nachteil, dass es noch möglich ist, sie von innen zu instanziieren. Glücklicherweise können Sie Klassen nicht mit privaten Konstruktoren erweitern.

Dies ist eine Möglichkeit:

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

__static_ctorHier ist ein sofort aufgerufener Funktionsausdruck. Typescript gibt Code aus, um ihn am Ende der generierten Klasse aufzurufen.

Update: Für generische Typen in statischen Konstruktoren, auf die statische Mitglieder nicht mehr verweisen dürfen, benötigen Sie jetzt einen zusätzlichen Schritt:

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

In jedem Fall können Sie natürlich einfach den statischen Konstruktor vom generischen Typ nach der Klasse aufrufen , z.

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

Denken Sie daran, nie Gebrauch thisin __static_ctoroben (offensichtlich).

Ich habe heute (31/07/2018) den gleichen Anwendungsfall erhalten und fand, dass dies eine Problemumgehung ist. Es basiert auf meiner Forschung und hat bei mir funktioniert. Erwartung - Um Folgendes in TypeScript zu erreichen:

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

Ich war das:

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

Daher werden wir es wie folgt konsumieren:

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

Das hat bei mir funktioniert. Wenn jemand andere bessere Vorschläge hat, lassen Sie es uns bitte alle hören !!! Vielen Dank...

Statische Klassen in Sprachen wie C # existieren, da es keine anderen Konstrukte der obersten Ebene zum Gruppieren von Daten und Funktionen gibt. In JavaScript ist dies jedoch der Fall, und daher ist es viel natürlicher, ein Objekt einfach so zu deklarieren, wie Sie es getan haben. Um die Klassensyntax genauer nachzuahmen, können Sie Methoden wie folgt deklarieren:

const myStaticClass = {
    property: 10,

    method() {

    }
}

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

Dies ist eine Möglichkeit, einen statischen Konstruktor zu "fälschen". Es ist nicht ungefährlich - siehe den Codeplex-Artikel, auf den verwiesen wird .

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

Eine Möglichkeit, dies zu erreichen, besteht darin, statische Instanzen einer Klasse in einer anderen Klasse zu haben. Beispielsweise:

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

Dann kann mit Wrapper auf Parameter zugegriffen werden, ohne dass eine Instanz davon deklariert werden muss. Beispielsweise:

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

Sie erhalten also die Vorteile des JavaScript-Typobjekts (wie in der ursprünglichen Frage beschrieben), aber die Vorteile, dass Sie die TypeScript-Typisierung hinzufügen können. Außerdem wird vermieden, dass vor allen Parametern in der Klasse 'static' hinzugefügt werden muss.

Mit externen ES6-Modulen kann dies folgendermaßen erreicht werden:

// privately scoped array
let arr = [];

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

Dies verhindert die Verwendung interner Module und Namespaces, was von TSLint [1] [2] als schlechte Praxis angesehen wird , ermöglicht privates und öffentliches Scoping und verhindert die Initialisierung unerwünschter Klassenobjekte.

Ich suchte nach etwas Ähnlichem und stieß auf etwas namens Singleton Pattern .

Referenz: Singleton-Muster

Ich arbeite an einer BulkLoader-Klasse, um verschiedene Dateitypen zu laden, und wollte das Singleton-Muster dafür verwenden. Auf diese Weise kann ich Dateien aus meiner Hauptanwendungsklasse laden und die geladenen Dateien einfach aus anderen Klassen abrufen.

Im Folgenden finden Sie ein einfaches Beispiel, wie Sie mit TypeScript und dem Singleton-Muster einen Score-Manager für ein Spiel erstellen können.

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

Dann würden Sie überall in Ihren anderen Klassen Zugriff auf den Singleton erhalten, indem Sie:

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

Sie können auch Schlüsselwörter verwenden namespace, um Ihre Variablen, Klassen, Methoden usw. zu organisieren. Siehe 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);
        }
    }
}