Extending a class using interface and ES6 Proxy

[JimmyPruitt]

I checked the FAQ and didn't see anything related to this problem and didn't find anything I thought looked related. I'll admit that the code snippet below doesn't come from a place of complete comprehension of Typescript and inheritance, so it's possible that a language feature exists I'm not aware of, but as it stands I can't get my code to compile.

Search Terms:

• typescript es6 proxy interface
• typescript interface missing property

Code

interface IArrayProxy<T> extends Array<T> {}

// @ts-ignore I'm okay with needing this because the case is somewhat exceptional
class ArrayProxy<T> implements IArrayProxy<T> {
  constructor(protected array: T[]) {
    return new Proxy(this, this);
  }

  public get(target: any, prop: string) {
    return this.hasOwnProperty(prop) ? this[prop] : this.array[prop];
  }

  // More functions below
}

const arrayProxy = new ArrayProxy([]);
console.log(arrayProxy['length']); // <--- Compiles and gives desired output
console.log(arrayProxy.length); // <-- Gives desired output but doesn't compile

Expected behavior: The entire block compiles and runs correctly

Actual behavior: The block doesn't compile because of the final line

Playground Link: link to playground

Related Issues: N/A

[weswigham]

Have you considered adding extends Array<T> to the class and a super() call in the constructor before constructing and returning the proxy? The issue is simply that, unlike extends, implements doesn't actually mixin the members from the implementing type into the new type - it just asserts that they are implemented (which is the error you're suppressing). By using extends instead, you get the properties mixed in, and you no longer need the ts-ignore.

[JimmyPruitt]

So if I change it to

class ArrayProxy<T> extends Array<T> {
  constructor(array: T[]) {
    super(...array);

    this.customFunction();
  }

  customFunction() {}

  // More functions below
}

const arrayProxy = new ArrayProxy([]);

I get an exception:

VM100:19 Uncaught TypeError: _this.customFunction is not a function
at new ArrayProxy (:19:15)
at :25:18
at HTMLButtonElement.excuteButton.onclick (http://www.typescriptlang.org/play/playground.js:247)

[weswigham]

Naw naw, I mean still using the proxy, along the lines of

class ArrayProxy<T> extends Array<T> {
  constructor(protected array: T[]) {
    super();
    return new Proxy(this, this);
  }

  public get(target: any, prop: string) {
    return this.hasOwnProperty(prop) ? this[prop] : this.array[prop];
  }

  // More functions below
}

const arrayProxy = new ArrayProxy([]);
console.log(arrayProxy['length']); // <--- Compiles and gives desired output
console.log(arrayProxy.length); // <-- Gives desired output but doesn't compile

[JimmyPruitt]

Yeah sorry this was a follow up question. I used a reduced example to illustrate what I thought was the problem but I need to call instance functions from inside the constructor. Returning a Proxy or not wouldn't change that. My actual use case is more akin to

class ArrayProxy<T> extends Array<T> {
  constructor(protected array: T[]) {
    super();
    this.customFunction();
    return new Proxy(this, this);
  }

  public get(target: any, prop: string) {
    return this.hasOwnProperty(prop) ? this[prop] : this.array[prop];
  }

  public customFunction() {}

  // More functions below
}

const arrayProxy = new ArrayProxy([]);

[weswigham]

Mmmm... I think that might be because our downlevel emit doesn't work for extending builtins (although since you're using proxies you should be targeting es6 anyway and not be downleveling classes).

[JimmyPruitt]

Oh I didn't notice the Playground wasn't targeting ES6. Is there a way to change it? I only see a couple compiler options and target ain't one of them.

[weswigham]

Not right now, no. :( Our playground is missing a lot of features we wish it had.

[JimmyPruitt]

And I assume there aren't any workarounds for extending builtins when downleveling (and not using ES6 features)?

[weswigham]

The core of the issue with builtins downlevel is that a super call translates to _super.apply(this, otherArg) where _super is, eg Array. Unfortunately, Array, Error, and friends don't respect the this passed in when called and ignore it (not being sure how to allocate the backing runtime object for an arbitrary js object). It's not really fixable downlevel, since, at best, you ignore what the super constructor returns and hope it's not important - but that causes other problems with other valid code.

[JimmyPruitt]

Okie doke. Thanks for your help.

[typescript-bot]

This issue has been marked as 'Question' and has seen no recent activity. It has been automatically closed for house-keeping purposes. If you're still waiting on a response, questions are usually better suited to stackoverflow.