Các lớp tĩnh TypeScript

Tôi muốn chuyển sang TypeScript từ JS truyền thống vì tôi thích cú pháp giống C #. Vấn đề của tôi là tôi không thể tìm ra cách khai báo các lớp tĩnh trong TypeScript.

Trong C #, tôi thường sử dụng các lớp tĩnh để tổ chức các biến và phương thức, đặt chúng lại với nhau trong một lớp được đặt tên mà không cần phải kích hoạt một đối tượng. Trong vanilla JS, tôi đã từng làm điều này với một đối tượng JS đơn giản:

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

Trong TypeScript, tôi thà đi theo cách tiếp cận C-sharpy của mình, nhưng dường như các lớp tĩnh không tồn tại trong TS. Giải pháp thích hợp cho vấn đề này là gì?

TypeScript không phải là C #, vì vậy bạn không nên mong đợi các khái niệm tương tự về C # trong TypeScript. Câu hỏi là tại sao bạn muốn các lớp tĩnh?

Trong C #, một lớp tĩnh chỉ đơn giản là một lớp không thể được phân lớp và chỉ chứa các phương thức tĩnh. C # không cho phép một người xác định các chức năng bên ngoài các lớp. Trong TypeScript, điều này là có thể, tuy nhiên.

Nếu bạn đang tìm cách đưa các hàm / phương thức của mình vào một không gian tên (nghĩa là không phải là toàn cục), bạn có thể xem xét sử dụng các mô-đun của TypeScript, ví dụ:

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

Vì vậy, bạn có thể truy cập Mf () bên ngoài, nhưng không phải s và bạn không thể mở rộng mô-đun.

Xem đặc tả TypeScript để biết thêm chi tiết.

Các lớp trừu tượng đã là công dân hạng nhất của TypeScript kể từ TypeScript 1.6. Bạn không thể khởi tạo một lớp trừu tượng.

Đây là một ví dụ:

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

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

const okay = MyClass.doSomething();

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

Xác định các thuộc tính và phương thức tĩnh của một lớp được mô tả trong 8.2.1 của Đặc tả ngôn ngữ bản in :

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

trong đó Point.distance()một phương thức tĩnh (hoặc "lớp").

Câu hỏi này khá cũ nhưng tôi muốn để lại câu trả lời tận dụng phiên bản hiện tại của ngôn ngữ. Thật không may, các lớp tĩnh vẫn không tồn tại trong TypeScript tuy nhiên bạn có thể viết một lớp hoạt động tương tự chỉ với một chi phí nhỏ bằng cách sử dụng một hàm tạo riêng để ngăn việc tạo các lớp từ bên ngoài.

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

Đoạn mã này sẽ cho phép bạn sử dụng các lớp "tĩnh" tương tự như đối tác C # với nhược điểm duy nhất là vẫn có thể khởi tạo chúng từ bên trong. May mắn thay mặc dù bạn không thể mở rộng các lớp với các nhà xây dựng tư nhân.

Đây là một cách:

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

__static_ctorđây là một biểu thức hàm được gọi ngay lập tức Bản đánh máy sẽ xuất mã để gọi nó ở cuối lớp được tạo.

Cập nhật: Đối với các loại chung trong các hàm tạo tĩnh, không còn được phép tham chiếu bởi các thành viên tĩnh, bạn sẽ cần thêm một bước nữa:

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

Trong mọi trường hợp, tất nhiên, bạn chỉ có thể gọi hàm tạo kiểu tĩnh chung sau lớp, chẳng hạn như:

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

Chỉ cần nhớ KHÔNG BAO GIỜ sử dụng thisở __static_ctortrên (rõ ràng).

Tôi đã nhận được trường hợp sử dụng tương tự ngày hôm nay (31/07/2018) và thấy đây là một cách giải quyết. Nó dựa trên nghiên cứu của tôi và nó đã làm việc cho tôi. Mong đợi - Để đạt được những điều sau trong TypeScript:

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

Tôi đã làm điều này:

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

Do đó chúng ta sẽ tiêu thụ nó như sau:

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

Điều này làm việc cho tôi. Nếu bất cứ ai có đề nghị tốt hơn xin vui lòng cho tất cả chúng ta nghe nó !!! Cảm ơn...

Các lớp tĩnh trong các ngôn ngữ như C # tồn tại vì không có cấu trúc cấp cao nhất khác để nhóm dữ liệu và hàm. Tuy nhiên, trong JavaScript, họ làm như vậy và việc khai báo một đối tượng như bạn đã làm sẽ tự nhiên hơn nhiều. Để bắt chước chặt chẽ hơn cú pháp lớp, bạn có thể khai báo các phương thức như vậy:

const myStaticClass = {
    property: 10,

    method() {

    }
}

Xem http://www.basarat.com/2013/04/typescript-static-constructor-for.html

Đây là một cách để 'giả' một nhà xây dựng tĩnh. Không phải là không có những nguy hiểm của nó - xem mục codeplex được tham chiếu .

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

Một cách có thể để đạt được điều này là có các thể hiện tĩnh của một lớp trong một lớp khác. Ví dụ:

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

Sau đó, các tham số có thể được truy cập bằng Wrapper, mà không phải khai báo một thể hiện của nó. Ví dụ:

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

Vì vậy, bạn nhận được các lợi ích của đối tượng loại JavaScript (như được mô tả trong câu hỏi ban đầu) nhưng với các lợi ích của việc có thể thêm kiểu gõ TypeScript. Ngoài ra, nó tránh phải thêm 'tĩnh' trước tất cả các tham số trong lớp.

Với các mô-đun bên ngoài ES6, điều này có thể đạt được như vậy:

// privately scoped array
let arr = [];

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

Điều này ngăn việc sử dụng các mô-đun và không gian tên nội bộ được coi là thực hành xấu của TSLint [1] [2] , cho phép phạm vi riêng tư và công khai và ngăn chặn việc khởi tạo các đối tượng lớp không mong muốn.

Tôi đã tìm kiếm một cái gì đó tương tự và đi qua một cái gì đó gọi là Singleton Pattern.

Tham khảo: Mẫu đơn

Tôi đang làm việc trên một lớp BulkLoader để tải các loại tệp khác nhau và muốn sử dụng mẫu Singleton cho nó. Bằng cách này, tôi có thể tải các tệp từ lớp ứng dụng chính của mình và truy xuất các tệp được tải dễ dàng từ các lớp khác.

Dưới đây là một ví dụ đơn giản về cách bạn có thể tạo trình quản lý điểm cho trò chơi với TypeScript và mẫu Singleton.

lớp 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;
}   }

Sau đó, bất cứ nơi nào trong các lớp học khác của bạn, bạn sẽ có quyền truy cập vào Singleton bằng cách:

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

Bạn cũng có thể sử dụng từ khóa namespaceđể sắp xếp các biến, lớp, phương thức của mình, v.v. Xem tài liệu

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