Kelas statis TypeScript

Saya ingin pindah ke TypeScript dari JS tradisional karena saya suka sintaks mirip C #. Masalah saya adalah bahwa saya tidak dapat menemukan cara mendeklarasikan kelas statis di TypeScript.

Di C #, saya sering menggunakan kelas statis untuk mengatur variabel dan metode, menempatkan mereka bersama-sama di kelas bernama, tanpa harus membuat instance objek. Di vanilla JS, saya biasa melakukan ini dengan objek JS sederhana:

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

Dalam TypeScript, saya lebih suka menggunakan pendekatan C-sharpy saya, tetapi tampaknya kelas statis tidak ada di TS. Apa solusi yang tepat untuk masalah ini?

TypeScript bukan C #, jadi Anda seharusnya tidak mengharapkan konsep yang sama dari C # di TypeScript tentu. Pertanyaannya adalah mengapa Anda ingin kelas statis?

Dalam C # kelas statis hanyalah kelas yang tidak dapat disubklasifikasikan dan hanya boleh berisi metode statis. C # tidak memungkinkan seseorang untuk mendefinisikan fungsi di luar kelas. Namun dalam TypeScript ini dimungkinkan.

Jika Anda mencari cara untuk menempatkan fungsi / metode Anda dalam namespace (yaitu tidak global), Anda dapat mempertimbangkan untuk menggunakan modul TypeScript, misalnya

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

Sehingga Anda dapat mengakses Mf () secara eksternal, tetapi tidak s, dan Anda tidak dapat memperpanjang modul.

Lihat spesifikasi TypeScript untuk lebih jelasnya.

Kelas abstrak telah menjadi warga negara kelas satu dari TypeScript sejak TypeScript 1.6. Anda tidak dapat membuat instance kelas abstrak.

Berikut ini sebuah contoh:

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

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

const okay = MyClass.doSomething();

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

Mendefinisikan properti dan metode statis suatu kelas dijelaskan dalam 8.2.1 dari Spesifikasi Bahasa Naskah :

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

di mana Point.distance()metode statis (atau "kelas").

Pertanyaan ini cukup tanggal namun saya ingin meninggalkan jawaban yang memanfaatkan versi bahasa saat ini. Sayangnya kelas statis masih belum ada di TypeScript namun Anda dapat menulis kelas yang berperilaku serupa dengan hanya overhead kecil menggunakan konstruktor pribadi yang mencegah instantiasi kelas dari luar.

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

Cuplikan ini akan memungkinkan Anda untuk menggunakan kelas "statis" mirip dengan mitra C # dengan satu-satunya downside yang masih memungkinkan untuk membuat instance mereka dari dalam. Untungnya, Anda tidak dapat memperpanjang kelas dengan konstruktor pribadi.

Ini satu cara:

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

__static_ctordi sini adalah ekspresi fungsi yang segera dipanggil. Naskah akan menampilkan kode untuk memanggilnya di akhir kelas yang dihasilkan.

Pembaruan: Untuk tipe umum dalam konstruktor statis, yang tidak lagi diizinkan untuk direferensikan oleh anggota statis, Anda akan memerlukan langkah tambahan sekarang:

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

Dalam kasus apa pun, tentu saja, Anda bisa memanggil konstruktor statis tipe generik setelah kelas, seperti:

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

Hanya ingat untuk TIDAK PERNAH menggunakan thisdi __static_ctoratas (jelas).

Saya mendapat kasus penggunaan yang sama hari ini (31/07/2018) dan menemukan ini sebagai solusinya. Ini berdasarkan penelitian saya dan itu berhasil untuk saya. Harapan - Untuk mencapai yang berikut dalam TypeScript:

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

Saya melakukan ini:

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

Maka kami akan mengkonsumsinya seperti di bawah ini:

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

Ini berhasil untuk saya. Jika ada yang punya saran lain yang lebih baik, silakan beri tahu kami semua !!! Terima kasih...

Kelas statis dalam bahasa seperti C # ada karena tidak ada konstruksi tingkat atas lainnya untuk mengelompokkan data dan fungsi. Namun, dalam JavaScript, mereka melakukannya dan jadi lebih alami untuk mendeklarasikan objek seperti yang Anda lakukan. Untuk meniru lebih dekat sintaks kelas, Anda dapat mendeklarasikan metode seperti:

const myStaticClass = {
    property: 10,

    method() {

    }
}

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

Ini adalah cara untuk 'memalsukan' konstruktor statis. Ini bukan tanpa bahaya - lihat item codeplex yang dirujuk .

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

Salah satu cara yang mungkin untuk mencapai ini adalah memiliki instance statis dari kelas dalam kelas lain. Sebagai contoh:

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

Kemudian parameter dapat diakses menggunakan Wrapper, tanpa harus mendeklarasikan instance itu. Sebagai contoh:

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

Jadi Anda mendapatkan manfaat dari objek tipe JavaScript (seperti dijelaskan dalam pertanyaan asli) tetapi dengan manfaat bisa menambahkan pengetikan TypeScript. Selain itu, ia menghindari keharusan menambahkan 'statis' di depan semua parameter di kelas.

Dengan modul eksternal ES6 ini dapat dicapai seperti:

// privately scoped array
let arr = [];

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

Ini mencegah penggunaan modul internal dan ruang nama yang dianggap praktik buruk oleh TSLint [1] [2] , memungkinkan pelingkupan privat dan publik dan mencegah inisialisasi objek kelas yang tidak diinginkan.

Saya sedang mencari sesuatu yang serupa dan menemukan sesuatu yang disebut Singleton Pattern.

Referensi: Pola Singleton

Saya sedang mengerjakan kelas BulkLoader untuk memuat berbagai jenis file dan ingin menggunakan pola Singleton untuk itu. Dengan cara ini saya dapat memuat file dari kelas aplikasi utama saya dan mengambil file yang dimuat dengan mudah dari kelas lain.

Di bawah ini adalah contoh sederhana bagaimana Anda bisa membuat manajer skor untuk permainan dengan TypeScript dan pola Singleton.

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

Lalu di mana pun di kelas Anda yang lain, Anda akan mendapatkan akses ke Singleton dengan:

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

Anda juga dapat menggunakan kata kunci namespaceuntuk mengatur variabel, kelas, metode, dan sebagainya. Lihat 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);
        }
    }
}