1

I am trying to import the type information for Proxy, see picture:

enter image description here

It looks like it's located at lib.es6.d.ts, but when I try to select that, I get:

enter image description here

Anybody see a similar issue with Proxy and Webstorm? I have seen it many times, finally asking about it.

Alexander Mills
  • 90,741
  • 139
  • 482
  • 817
  • Have you told Typescript to target ES6? Older environments don't support Proxy. – loganfsmyth Sep 25 '17 at 05:31
  • hey @loganfsmyth I am not sure what you mean...I would think that TS would support ES6..I guess what you mean is that TS cannot compile it down to ES5? – Alexander Mills Sep 25 '17 at 05:45
  • Right, "targetting ES6" means you've told Typescript to output ES6 code, which would allow you to use `Proxy`. If you're outputting ES5, proxies will not work consistently on older environments and so are not allowed. – loganfsmyth Sep 25 '17 at 06:05
  • Yeah I see, yeah Proxy is very useful for libraries..I got it to compile as I indicated in my answer but not sure how kosher it really is, let me know what you think. – Alexander Mills Sep 25 '17 at 06:14
  • For reference, where Proxy is available in the browser: http://caniuse.com/#search=proxy – Alexander Mills Sep 25 '17 at 19:48

2 Answers2

1

Typescript varies in what it actually allows, based on what output language version you specify. If you tell Typescript that you want to output code compatible with ES5 for instance, it will not load the lib.es6.d.ts definitions, because you haven't told it you'll be running in an environment that supports that stuff. For instance see Typescript- What is target in tsconfig? and Need clarification of the target and lib compiler options.

In your case, since Proxy only exists on modern environments, I'm assuming that you never expect your code to work on older environments. Based on that assumption, you should be safe in telling Typescript

target: 'es6'

in your Typescript configuration.

loganfsmyth
  • 156,129
  • 30
  • 331
  • 251
  • this makes sense, I will see if that works, although I need to target ES5 though because library code needs to run on ES5. There are some proxy polyfill libraries not sure if you know how good they are? – Alexander Mills Sep 25 '17 at 06:55
  • 1
    If it needs to work on ES5, you absolutely cannot use `Proxy`. The whole reason proxy exists is to support functionality that was impossible to achieve in ES5, so it's impossible to polyfill. If all you're using is `get` then you could explore using `Object.defineProperty` to add getters and setters for the properties you need, but there's no way in ES5 to have a catch-all property access. – loganfsmyth Sep 25 '17 at 06:58
  • Yeah...I know what you mean...what about this https://github.com/GoogleChrome/proxy-polyfill – Alexander Mills Sep 25 '17 at 07:03
  • https://github.com/sumanjs/suman/blob/master/lib/test-suite-helpers/make-test-suite.ts#L115 – Alexander Mills Sep 25 '17 at 07:09
  • 1
    There are boat-loads of things wrong with that, but at the end of the day all it does for `get` is call `Object.defineProperty`. If that's all you need for what you're doing, your code will be infinitely more readable if you just call `Object.defineProperty` yourself instead of pretending to use a proxy when you're not actually doing that. – loganfsmyth Sep 25 '17 at 07:10
  • yeah..Proxy was available starting in Node.js version 6. Honest question for you, what is the most recent browser that does not support Proxy? I might just support Node versions >= 6, and browsers that support Proxy. – Alexander Mills Sep 25 '17 at 07:16
  • 1
    It's mostly if you want to support IE, or older mobile browsers. Take a look at https://caniuse.com/#search=Proxy. It's really up to you as far as what you feel needs to be supported. – loganfsmyth Sep 25 '17 at 08:34
0

Alright so I can get it to compile like so (in my case using Function as the return type):

   const getProxy = function (method: Function, rule: Object, props?: Array<string>): Function {

        return new Proxy(method, {
          get: function (target, prop) {
               return function(){ }  // everytime, a function is returned.
          }
       });

   }

so that seems to work for me for the moment.

Alexander Mills
  • 90,741
  • 139
  • 482
  • 817