Access members of outer class in TypeScript

Question

Since TypeScript 1.6, we can easily create inner classes with class expressions. In other OOP-centric languages like Java, inner classes can access members of the outer class, even private ones.

This behavior is similar to concept of closures, where function could access variables from the scope in which it was defined.

Why I can't achieve this in TypeScript? Does specification of classes in ECMAScript 2015 plays role here?

Code that presents expected behavior:

class OuterClass {
    private outerField = 1337;

    public InnerClass = class { 
        public accessOuter() {
            return this.outerField; // outerField not defined
        }
    }
}

var outer = new OuterClass();
var inner = new outer.InnerClass();
var win = inner.accessOuter();

see https://stackoverflow.com/a/45244695/279393 for another way to achieve this. — bnieland, Jul 21 '17 at 20:44

Nitzan Tomer · Accepted Answer · 2016-08-03T07:54:15.357

It's easier to understand why you can't do that if you look at the compiled javascript of your code:

var OuterClass = (function () {
    function OuterClass() {
        this.outerField = 1337;
        this.InnerClass = (function () {
            function class_1() {
            }
            class_1.prototype.accessOuter = function () {
                return this.outerField; // outerField not defined
            };
            return class_1;
        }());
    }
    return OuterClass;
}());

As you can see, outerField is defined as a member of OuterClass like so:

this.outerField = 1337;

When you try to access it in your InnerClass you do:

return this.outerField;

But the this here is the instance of class_1 and not OuterClass so there's no outerField in this.
Also, you have no access from the inner class to the instance of the outer class.

The way this is solved in java is like so:

class OuterClass {
    private int outerField = 1337;

    public class InnerClass {
        public int accessOuter() {
            return OuterClass.this.outerField;
        }
    }
}

But there's no equivalent to OuterClass.this.outerField in typescript/javascript.
Look at typescript inner classes more like static inner classes in java, but here too you'll only be able to access public properties:

class OuterClass {
    public static outerField = 1337; // has to be public

    public InnerClass = class { 
        public accessOuter() {
            return OuterClass.outerField;
        }
    }
}

You can pass an instance of the outer class to the inner class:

class OuterClass {
    public outerField = 1337;

    public InnerClass = class {
        constructor(private parent: OuterClass) {}

        public accessOuter() {
            return this.parent.outerField;
        }
    }
}

But again, you'll need to have outerField public.

Edit

In case you want to achieve something that will simulate the needed behavior (that is, the inner class instance will have access to a private outer class members), then you can do something like this:

interface OuterClassProxy {
    outerField: number;
}

interface IInnerClass {}

class OuterClass {
    private outerField = 1337;

    static InnerClass = class implements IInnerClass {
        constructor(private parent: OuterClassProxy) {}

        public accessOuter() {
            return this.parent.outerField;
        }
    }

    public createInnerClass(): IInnerClass {
        let outerClassInstance = this;

        return new OuterClass.InnerClass({
            get outerField(): number {
                return outerClassInstance.outerField;
            },
            set outerField(value: number) {
                outerClassInstance.outerField = value;
            }
        });
    }
}

It's quite a lot of work, but it will do it.

score 10 · Answer 2 · answered Oct 26 '16 at 11:54

10

@Nitzan 's answer is great. I just wanted to add that I came up with this recently, maybe it helps:

class Outer {

    constructor() {
        this.val = 1337;
    }

    get Inner() {
        let Outer = this;
        return class {
            accessVal() { return Outer.val; }
        }
    }

}

new (new Outer()).Inner().accessVal(); // 1337

answered Oct 26 '16 at 11:54

Kosmas Papadatos

1,277
2
14
32

1

Probably a good idea to add an interface for the inner class where it's used – eddiewould Jul 09 '17 at 11:23

score 2 · Answer 3 · answered Apr 15 '17 at 13:51

2

Here is the correct way to do this in Typescript:

class OuterClass {
  private outerField = 1337;

  get InnerClass() {
    const thatOuterField = this.outerField // <-- Notice this addition
    return   class {
      public accessOuter() {
        return thatOuterField; // outerField not defined
      }
    }
  }


}

let outer = new OuterClass();
let inner = new outer.InnerClass();
let win = inner.accessOuter();

alert(win); // test works!

No need for anything convoluted.

answered Apr 15 '17 at 13:51

Somo S.

3,997
4
26
33

2

this is the same approach Kosmas already posted 6 months before – phil294 Nov 24 '17 at 00:40
You wouldn't be able to modify outerField though... – phreakhead Jan 13 '22 at 00:07

score 0 · Answer 4 · answered Apr 16 '21 at 10:32

This one did not work so bad for me:

function use<T>(value: T) {return new class {with<U>(f: (value: T) => U) {return f(value)}}}

class OuterClass {
    private outerField = 1337;

    InnerClass = use(this).with(outerThis => class { 
        accessOuter() {
            return outerThis.outerField; // outerField not defined
        }
    }
}
const outer = new OuterClass()
const inner = new outer.InnerClass()
const win = inner.accessOuter()
console.log(win)

Access members of outer class in TypeScript

4 Answers4

Edit