TypeScript static classes

Question

I wanted to move to TypeScript from traditional JS because I like the C -like syntax  My problem is that I can t find out how to declare static classes in TypeScript   In C   I often use static classes to organize variables and methods  putting them together in a named class  without needing to instatiate an object  In vanilla JS  I used to do this with a simple JS object   var myStaticClass         property  10      method  function         In TypeScript  I would rather go for my C-sharpy approach  but it seems that static classes don t exist in TS   What is the appropriate solution for this problem

User · Answer

I was searching for something similar and came accross something called the Singleton Pattern.

Reference: Singleton Pattern

I am working on a BulkLoader class to load different types of files and wanted to use the Singleton pattern for it. This way I can load files from my main application class and retrieve the loaded files easily from other classes.

Below is a simple example how you can make a score manager for a game with TypeScript and the Singleton pattern.

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;
}   }
Then anywhere in your other classes you would get access to the Singleton by:
var scoreManager = SingletonClass.getInstance();
scoreManager.setScore(10); scoreManager.addPoints(1);
scoreManager.removePoints(2); console.log( scoreManager.getScore() );

User · Answer

One possible way to achieve this is to have static instances of a class within another class  For example   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        Then parameters can be accessed using Wrapper  without having to declare an instance of it  For example   Wrapper System pageWidth   1234  Wrapper DocLevel totalPages   10    So you get the benefits of the JavaScript type object  as described in the original question  but with the benefits of being able to add the TypeScript typing  Additionally  it avoids having to add  static  in front of all the parameters in the class

User · Answer

You can also use keyword namespace to organize your variables  classes  methods and so on  See 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  amp  amp  numberRegexp test s

User · Answer

You can create a class in Typescript as follows  export class coordinate           static x  number          static y  number          static gradient                 return y x                   and reference it s properties and methods  quot without quot  instantiation so  coordinate x   10  coordinate y   10  console log  x of   coordinate x  and y of   coordinate y  has gradient of   coordinate gradient        Fyi using backticks    in conjunction with interpolation syntax     allows ease in mixing code with text  -

User · Answer

This question is quite dated yet I wanted to leave an answer that leverages the current version of the language  Unfortunately static classes still don t exist in TypeScript however you can write a class that behaves similar with only a small overhead using a private constructor which prevents instantiation of classes from outside   class MyStaticClass       public static readonly property  number   42      public static myMethod    void                   private constructor        noop          This snippet will allow you to use  static  classes similar to the C  counterpart with the only downside that it is still possible to instantiate them from inside  Fortunately though you cannot extend classes with private constructors

User · Answer

I got the same use case today 31 07 2018  and found this to be a workaround  It is based on my research and it worked for me  Expectation - To achieve the following in TypeScript   var myStaticClass         property  10      method  function          I did this     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                       Hence we shall consume it as below     app ts      lt reference path  MyStaticMembers ts    gt      console log MyStaticMembers Property       MyStaticMembers Method      This worked for me  If anyone has other better suggestions please let us all hear it     Thanks

User · Answer

Static classes in languages like C  exist because there are no other top-level constructs to group data and functions  In JavaScript  however  they do and so it is much more natural to just declare an object like you did  To more closely mimick the class syntax  you can declare methods like so   const myStaticClass         property  10       method

User · Answer

With ES6 external modules this can be achieved like so      privately scoped array let arr        export let ArrayModule         add  x   gt  arr push x       print       gt  console log arr       This prevents the use of internal modules and namespaces which is considered bad practice by TSLint  1   2   allows private and public scoping and prevents the initialisation of unwanted class objects

User · Answer

This is one way   class SomeClass       private static myStaticVariable    whatever       private static   static ctor         gt       do static constructor stuff                   static ctor here is an immediately invoked function expression  Typescript will output code to call it at the end of the generated class   Update  For generic types in static constructors  which are no longer allowed to be referenced by static members  you will need an extra step now   class SomeClass lt T gt        static myStaticVariable    whatever       private    static ctor         gt    var someClass SomeClass lt T gt       do static constructor stuff                 private static   static ctor   SomeClass prototype    static ctor        In any case  of course  you could just call the generic type static constructor after the class  such as   class SomeClass lt T gt        static myStaticVariable    whatever       private   static ctor         gt    var example  SomeClass lt T gt      do static constructor stuff               SomeClass prototype   static ctor      Just remember to NEVER use this in   static ctor above  obviously

User · Answer

See http   www basarat com 2013 04 typescript-static-constructors-for html  This is a way to  fake  a static constructor  It s not without its dangers - see the referenced codeplex item   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

User · Answer

Abstract classes have been a first-class citizen of TypeScript since TypeScript 1 6  You cannot instantiate an abstract class   Here is an example   export abstract class MyClass                public static myProp    Hello        public static doSomething    string         return  World            const okay   MyClass doSomething       const errors   new MyClass       Error

User · Answer

TypeScript is not C   so you shouldn t expect the same concepts of C  in TypeScript necessarily  The question is why do you want static classes   In C  a static class is simply a class that cannot be subclassed and must contain only static methods  C  does not allow one to define functions outside of classes  In TypeScript this is possible  however   If you re looking for a way to put your functions methods in a namespace  i e  not global   you could consider using TypeScript s modules  e g   module M       var s    hello       export function f             return s            So that you can access M f   externally  but not s  and you cannot extend the module   See the TypeScript specification for more details

User · Answer

Defining static properties and methods of a class is described in 8 2 1 of the Typescript Language Specification  class Point      constructor public x  number  public y  number         throw new Error  cannot instantiate using a static class           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            where Point distance   is a static  or  quot class quot   method

[javascript] TypeScript static classes

Examples related to javascript

Examples related to class

Examples related to static

Examples related to typescript