How does prototype extend on typescript?

Question

i extended function prototype but typescript doesn't recognize it.

Function.prototype.proc = function() {
  var args, target, v;
  var __slice = [].slice;
  args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
  target = this;
  while (v = args.shift()) {
    target = target(v);
  }
  return target;
};
// generated by coffee-script

var foo: (number) => (string) => number
  = (a) => (b) => a * b.length;
console.log(foo.proc("first", "second"))

result: tsc -e

The property 'proc' does not exist on value of type 'Function'

how do i extend this object?

nxn · Accepted Answer · 2012-10-07 18:43:25Z

32

There is a Function interface in the standard typescript lib which declares the members of Function objects. You will need to declare proc as a member of that interface with your own add on like the following:

interface Function {
    proc(...args: any[]): any;
}

This interface will need to be referenced from anywhere you intend to use 'proc'.

edited Oct 7, 2012 at 18:43

answered Oct 7, 2012 at 18:03

nxn

4,3653 gold badges22 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3892448 Over a year ago

How to do this with your own classes?

gaperton · Accepted Answer · 2016-11-29 15:32:44Z

15

Like this:

declare global {
    interface Function {
        proc() : any;
    }
}

Without 'declare global' it doesn't work.

That's how module augmentation works in recent TypeScript versions. Check out the documentation and scroll down to the Module augmentation section.

edited Nov 29, 2016 at 15:32

anon

answered Jun 25, 2016 at 5:00

gaperton

3,8561 gold badge23 silver badges16 bronze badges

2 Comments

Ludwik Over a year ago

I wish you could explain why, but I confirm, same here. Thanks!

gaperton Over a year ago

That's how module augmentation works in recent TypeScript versions. Scroll it down: typescriptlang.org/docs/handbook/declaration-merging.html

Johan Perez · Accepted Answer · 2020-12-17 17:46:18Z

1

Static method

declare global { 
  interface NumberConstructor {
    formatCurrency(num: number): string;
  }
}

export const formatCurrency = (num: number) => {
  if (!num) return '$0';
  return '$' + num.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
};

Number.formatCurrency = formatCurrency;

non-static method

declare global {
  interface Number {
    formatCurrency: () => string;
  }
}

Number.prototype.formatCurrency = function() : string {
  return '$' + this.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
}

edited Dec 17, 2020 at 17:46

answered Dec 17, 2020 at 17:40

Johan Perez

2112 silver badges5 bronze badges

Comments

Hashbrown · Accepted Answer · 2019-03-26 02:25:54Z

Just adding that if you're trying to add define something that's already declared, then this is the typesafe way of doing so, that also guards against buggy for in implementations.

export const augment = <U extends (string|symbol), T extends {[key :string] :any}>(
    type  :new (...args :any[]) => T,
    name  :U,
    value :U extends string ? T[U] : any
) => {
    Object.defineProperty(type.prototype, name, {writable:true, enumerable:false, value});
};

Which can be used to safely polyfill. Example

//IE doesn't have NodeList.forEach()
if (!NodeList.prototype.forEach) {
    //this errors, we forgot about index & thisArg!
    const broken = function(this :NodeList, func :(node :Node, list :NodeList) => void) {
        for (const node of this) {
            func(node, this);
        }
    };
    augment(NodeList, 'forEach', broken);

    //better!
    const fixed = function(this :NodeList, func :(node :Node, index :number, list :NodeList) => void, thisArg :any) {
        let index = 0;
        for (const node of this) {
            func.call(thisArg, node, index++, this);
        }
    };
    augment(NodeList, 'forEach', fixed);
}

_{Unfortunately it can't typecheck your Symbols due to a limitation in current TS, and it won't yell at you if the string doesn't match any definition for some reason, I'll report the bug after seeing if they're already aware.}

Arman · Accepted Answer · 2017-05-02 22:52:41Z

-1

I am adding this to advise against adding prototypes like the example shown in question since many people view this question. Add it as follows:

interface Function {
    proc(...args: any[]): any;
}

Object.defineProperty(Function.prototype, 'proc', { value: function(arg: any[]) {
    // Your function body
}});

The reason is if you add it to the prototype directly, it could get enumerated if an instance of that function get's enumerated over. for i in ... Now this block could be in a code you do not control (recently happened to me), so it is best to keep your code as safe as possible.

answered May 2, 2017 at 22:52

Arman

2,3103 gold badges26 silver badges32 bronze badges

4 Comments

Hashbrown Over a year ago

you're not typechecking anything (defineProperty() doesn't do any for you), you need to use a helper like this

Arman Over a year ago

@Hashbrown did you read the question? there is no typechecking here, just how you extend an existing prototype

Hashbrown Over a year ago

this is typescript, literally the whole point of using the language. Everything you add you should type properly. I just thought if you're going to warn people about enumeration and stuff, why not keep up the good practice and use the interface that we just wrote (not to mention that these types of questions are seen by maaany people and not just the question-asker, so putting in best practice and not just answering the question, like you did here adding your own advice too, is nothing but a good thing)

Arman Over a year ago

I agree with you, everything should be typed, but some of the typing syntax could be a little daunting and confuse people and make them miss the point.

Collectives™ on Stack Overflow

How does prototype extend on typescript?

5 Answers 5

1 Comment

2 Comments

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related