TypeScript to add methods?

Question

I'm just learning TypeScript and getting stuck trying to add some methods to the DOM or other existing objects. As an example, I'm trying to add a method I can call to use color in console logging. However, I'm getting a couple of TypeScript errors.

Object.defineProperties(console, {
    redLog: function(msg: string) { console.log(`%c${msg}`, 'color:red'); //TS error: Type '(msg: string) => void' has no properties in common with type 'PropertyDescriptor'.
    },
});

console.redLog("This should print red") //TS error: Property 'redLog' does not exist on type 'Console'.

Any idea what I'm doing wrong? I'm not sure how to leverage interfaces or whatever TS approach would be needed to allow me to add this console.redLog() method. Thanks for any help!

Karol Majewski · Accepted Answer · 2020-07-02 19:00:40Z

1

When modifying objects that are already defined in TypeScript, you need two things:

definition
implementation (that you've done)

To tell TypeScript it can expect a method called redLog on the console, you need to find the type/interface that stores the definition of console and augment it.

In this case, console is described by the Console interface defined in the global scope. To add a property to that interface, you need to enter the scope in which it exists and define it again. Your definition will be merged with the existing one.

This definition will enter the global scope (declare global) and re-define the Console interface:

declare global {
  interface Console {
    redLog(msg: string): string;
  }
}

Put that definition in your project, and your global Console will be augmented!

Complete solution

declare global {
  interface Console {
    redLog(msg: string): void;
  }
}

Object.defineProperties(console, {
  redLog: {
    value: function (msg: string) {
      console.log(`%c${msg}`, 'color:red')
    },
  }
});

Playground link

edited Jul 2, 2020 at 19:00

answered Jun 30, 2020 at 20:43

Karol Majewski

26.2k9 gold badges53 silver badges57 bronze badges

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

2 Comments

Robert T Over a year ago

Thank you! I made a small tweak to expect a void for the return and am able to directly add the method. However, I still get the same TypeScript error when I try to add it via Object.defineProperties(). Could you help me understand what I'm missing there? declare global { interface Console { redLog(msg: string): void; } } console.redLog = function (msg: string) { console.log(%c${msg}, 'color:red'); }, //Works Object.defineProperties(console, { redLog: function (msg: string) { console.log(%c${msg}, 'color:red'); //same TS error }, });

Karol Majewski Over a year ago

Of course! Sorry for not having verified this myself. When using Object.defineProperties, you need to define your newly added property in a special way. The object on the right-hand side must conform to the PropertyDescriptor interface. In other words, you need a nested property called value which should point to your implementation. I updated my answer.

Collectives™ on Stack Overflow

TypeScript to add methods?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related