<p dir="auto">A <strong>static constructor</strong> is a function that is run only once when the class is loaded. It can be used to initialize static class members and maybe as entry point to the application.</p>
<p dir="auto">Suggested syntax is:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class MyClass {
    static initialized = false;

    static constructor() {
        MyClass.initialized = true;
    }
}

alert(MyClass.initialized);"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-smi">MyClass</span> <span class="pl-kos">{</span>
    <span class="pl-k">static</span> <span class="pl-c1">initialized</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>

    <span class="pl-k">static</span> <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">MyClass</span><span class="pl-kos">.</span><span class="pl-c1">initialized</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-en">alert</span><span class="pl-kos">(</span><span class="pl-smi">MyClass</span><span class="pl-kos">.</span><span class="pl-c1">initialized</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">That would be same as the following:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class MyClass {
    static initialized = false;

    static __ctor = (() =&gt; {
        MyClass.initialized = true;
    })();
}

alert(MyClass.initialized);"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-smi">MyClass</span> <span class="pl-kos">{</span>
    <span class="pl-k">static</span> <span class="pl-c1">initialized</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>

    <span class="pl-k">static</span> <span class="pl-c1">__ctor</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-smi">MyClass</span><span class="pl-kos">.</span><span class="pl-c1">initialized</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-en">alert</span><span class="pl-kos">(</span><span class="pl-smi">MyClass</span><span class="pl-kos">.</span><span class="pl-c1">initialized</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Except that <code class="notranslate">__ctor</code> does not need to be assigned to the class in the output code, and only needs to be invoked in an anonymous function. Also compiler can check that no more than one static constructor is defined in a class.</p>
<p dir="auto"><strong>Update:</strong> Since this generates an Immediately-Invoked Function Expression (IIFE), compiler should make sure to move it to the end of the class definition in the output JavaScript.</p>
<p dir="auto">TypeScript:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class MyClass {
    static constructor() {
        MyClass.initialized = true;
    }

    static initialized = false;
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-smi">MyClass</span> <span class="pl-kos">{</span>
    <span class="pl-k">static</span> <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">MyClass</span><span class="pl-kos">.</span><span class="pl-c1">initialized</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">static</span> <span class="pl-c1">initialized</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Expected JavaScript output:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var MyClass = (function () {
    function MyClass() {
    }
    MyClass.initialized = false;

    // run last
    (function () {
        MyClass.initialized = true;
    })();
    return MyClass;
})();"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-v">MyClass</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">function</span> <span class="pl-v">MyClass</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-kos">}</span>
    <span class="pl-v">MyClass</span><span class="pl-kos">.</span><span class="pl-c1">initialized</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>

    <span class="pl-c">// run last</span>
    <span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-v">MyClass</span><span class="pl-kos">.</span><span class="pl-c1">initialized</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-v">MyClass</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Note that body of the static constructor is moved to the bottom and invoked.</p>
<blockquote>
<p dir="auto">Related suggestion in codeplex: <a href="https://typescript.codeplex.com/workitem/862" rel="nofollow">Please add static constructors to classes</a></p>
</blockquote>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// test.tsx
/// &lt;reference path=&quot;react/react.d.ts&quot; /&gt;
/// &lt;reference path=&quot;react/react-dom.d.ts&quot; /&gt;
import React = require('react');
import ReactDOM = require('react-dom');
let Test = (state: any) =&gt; &lt;div /&gt;;
ReactDOM.render(&lt;Test /&gt;, document.getElementById('react'));"><pre class="notranslate"><code class="notranslate">// test.tsx
/// &lt;reference path="react/react.d.ts" /&gt;
/// &lt;reference path="react/react-dom.d.ts" /&gt;
import React = require('react');
import ReactDOM = require('react-dom');
let Test = (state: any) =&gt; &lt;div /&gt;;
ReactDOM.render(&lt;Test /&gt;, document.getElementById('react'));
</code></pre></div>
<p dir="auto">compiled with</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$ tsc test.tsx --jsx react --module commonjs"><pre class="notranslate"><code class="notranslate">$ tsc test.tsx --jsx react --module commonjs
</code></pre></div>
<p dir="auto">results in</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="error TS2605: JSX element type 'Element' is not a constructor function for JSX elements."><pre class="notranslate"><code class="notranslate">error TS2605: JSX element type 'Element' is not a constructor function for JSX elements.
</code></pre></div>
<p dir="auto">In case we translate JSX by hand and use</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="let Test = state =&gt; React.createElement(&quot;div&quot;, null);
ReactDOM.render(React.createElement(Test, null), document.getElementById('react'));"><pre class="notranslate"><code class="notranslate">let Test = state =&gt; React.createElement("div", null);
ReactDOM.render(React.createElement(Test, null), document.getElementById('react'));
</code></pre></div>
<p dir="auto">everything works as expected.</p>