Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Typescript: Using the type of a static inner class

I'm trying to write a class that exposes an inner data structure to its consumers, a data structure that the class itself will be using.

Example:

class Outer {
    static Inner = class {
        inInner: number
    };

    constructor(public inner: Outer.Inner) { }
}

The problem here is that Outer.Inner is not recognized as a type.

The only answers that I've found are workarounds (in Typescript playground). I'm wondering if there are any elegant ways of doing this.


Usecase:

I have a bunch of Actions that are sent over WebSockets between client and server. Each Action has its own Data inner class. The Data class itself is used elsewhere on the server. I could separate this into two classes (or an interface), like Action1, Action1Data, but I think that Action1.Data is a more readable design.

like image 553
Shayan Avatar asked Mar 17 '17 18:03

Shayan


2 Answers

Your second "workaround" is the prefer way to go:

class Outer {
    constructor(public inner: Outer.Inner) { }
}

namespace Outer {
    export class Inner {
        inInner: number
    };
}

// Spec
let outer1 = new Outer({ inInner: 3 });

let outerInner = new Outer.Inner();
let outer2 = new Outer(outerInner);

There are three types of declarations in TypeScript: namespace, type, and value. You could use namespace to organize types and value.

http://www.typescriptlang.org/docs/handbook/declaration-merging.html

It does not reduce readability because there is no concept of an "Inner Class" in TypeScript.

Remember that the class syntax is just sugar of es5 prototypal inheritance. How would you represent an inner class in prototypal inheritance? Do you put is as an instance variable? or under Outer.prototype.???

what it ends up in es5 is something like this:

var Outer = function Outer(...) { ... }
Outer.Inner = function Inner() { ... }

If you look at it, the Outer in Outer.Inner is only served as a "namespace" to hold the Inner class.

like image 70
unional Avatar answered Nov 05 '22 22:11

unional


I found a better workaround for this, that even allows the inner class to access the private members of the outer class, like you would expect in a C#-like language. You can actually easily get the type of the static property with the typeof operator. This small modification to your example works:

class Outer
{
    static Inner = class
    {
        inInner: number = 0;
    };

    constructor(public inner: typeof Outer.Inner.prototype) { }
}

But referring to the type as typeof Outer.Inner.prototype gets cumbersome really quickly, so add in this underneath and you can simply refer to it as Outer.Inner as you'd like:

namespace Outer
{
    export type Inner = typeof Outer.Inner.prototype;
}

Combine this with another workaround to allow us to put decorators on the class by making it not an anonymous class and we end up with a fully functional true inner class:

class Outer
{
    static Inner = (() =>
    {
        @decoratable()
        class OuterInner
        {
            inInner: number = 0;
        }
        return OuterInner;
    })();

    constructor(public inner: Outer.Inner) { }
}

namespace Outer
{
    export type Inner = typeof Outer.Inner.prototype;
}
like image 21
Blaise Roth Avatar answered Nov 05 '22 23:11

Blaise Roth