Typescript creating own types with functions

Question

I'm trying to create my own types on which i can call functions using the dot syntax.

for example:

let myOwnType: myByteType = 123211345; myOwnType.toHumanReadable(2);

I want to archive the same behavior like number, array etc. I don't want to create my type using the call signature or constructor signature

So after looking into the typescript libary i saw this number interface:

interface Number { /** * Returns a string representation of an object. * @param radix Specifies a radix for converting numeric values to strings. This value is only used for numbers. */ toString(radix?: number): string; /** * Returns a string representing a number in fixed-point notation. * @param fractionDigits Number of digits after the decimal point. Must be in the range 0 - 20, inclusive. */ toFixed(fractionDigits?: number): string; /** * Returns a string containing a number represented in exponential notation. * @param fractionDigits Number of digits after the decimal point. Must be in the range 0 - 20, inclusive. */ toExponential(fractionDigits?: number): string; /** * Returns a string containing a number represented either in exponential or fixed-point notation with a specified number of digits. * @param precision Number of significant digits. Must be in the range 1 - 21, inclusive. */ toPrecision(precision?: number): string; /** Returns the primitive value of the specified object. */ valueOf(): number; }

The Problem is that i could not find where and how the function bodys gets defined. I was thinking there must be a class implementing the interface or something like this.

I came up trying something like this:

interface Bytes { toHumanReadable(decimals: number): bytesToHumanReadable; bytesAs(unit: string): string; } function bytesToHumanReadable (decimals: number) { // convert bytes to GB, TB etc.. }

How could i create my own types and use them just like a normal type? I know that the Interface doesn't work either but it was my first guess.

Instead of interface, you probably want to use class (see stackoverflow.com/a/55505227/2358409) — uminder
– uminder, Commented Feb 29, 2020 at 15:06

T.J. Crowder · Accepted Answer · 2020-02-29 15:45:11Z

The Problem is that i could not find where and how the function bodys gets defined.

They're defined by the JavaScript engine, as part of the standard library. You'll find them on Number.prototype. Here's how it works: When you try to access a property on a primitive (for instance, someNumber.toString()), the JavaScript engine looks for the property on the prototype of that primitive's object type (number => Number, string => String, etc.). If you're making a call, it calls the method, passing in either the primitive (in strict mode) or an object wrapper for the primitive (in loose mode).

You can't define your own primitive type, that can only be done at the JavaScript specification level.

You could create a Byte class and have instances of it, but they'd be objects, not primitives.

class Byte { constructor(public value: number) { } yourMethodHere() { // ... } }

You can also add methods to Number.prototype, although it's best not to do that in any library code you may share with others. (Within your own app or page it's mostly fine, just be sure to use names that are unlikely to be used by future features of the standard library.)

For instance, this adds a toHex method to numbers:

// Adding it to the type interface Number { toHex(): string; } // Adding the implementation Object.defineProperty(Number.prototype, "toHex", { value() { return this.toString(16); }, enumerable: false, // This is the default, but just for emphasis... writable: true, configurable: true });

Live example on the playground

Great explanation. I really don't wan't to add a method to the number prototype cause of the possible troubles u already mentioned. I will learn more about the javascript engine itself and maybe use interfaces and objects instead.

DotNetApp · Accepted Answer · 2020-02-29 16:39:14Z

T.J. Crowder great answer i expanded a bit on it

 interface myByteType extends Number { toHumanReadable?(): string; } // Adding the implementation Object.defineProperty(Number.prototype, "toHumanReadable", { value() { return this.toString(16); }, enumerable: false, // This is the default, but just for emphasis... writable: true, configurable: true }); let a: myByteType = 2124; a.toHumanReadable();

with the questionmark syntax you have a workaround to use your own type with your defined function !

Gasoline and Sauce · Accepted Answer · 2020-02-29 15:25:32Z

You're already halfway there with the bytesToHumanReadable function but you're missing one key thing.

Since you want to add new functionality to numbers, you'll have to extend the base NumberConstructor interface and implement the functionality yourself. Let's take a look at this in practice.

interface myByteType extends NumberConstructor = { toHumanReadable: (decimals: number): string }

This is simply to satisfy the TypeScript compiler. You still have to implement the functionality yourself by extending the Number prototype like so:

Number.prototype.toHumanReadable = function(decimals: number) { // convert bytes to GB, TB etc.. }

You can then use the toHumanReadable function on any variable that extends the myByteType interface like so:

const secondsSinceOpened: myOwnType = 1334244200 secondsSinceOpened.toHumanReadable(2)

This question is very similar to this one so you could check it for further reading.

Creating properties on built-in prototypes via assignment is not best practice. Ensure the property is non-enumerable (see my answer for how).
The above gives a type error on const secondsSinceOpened: myOwnType = 1334244200 (if I fix various errors with the interface definition and make the type name match): "Type '1334244200' is not assignable to type 'myOwnType'" (also complains if you try to assign something typed number).

Collectives™ on Stack Overflow

Typescript creating own types with functions

3 Answers 3

1 Comment

Comments

2 Comments

Linked

Hot Network Questions