Extend String.prototype and other prototypes in TypeScript

# Table of Contents

1. Extend String.prototype in TypeScript
2. Extend Object.prototype in TypeScript
3. Extend Date.prototype in TypeScript
4. Extend Number.prototype in TypeScript

# Extend String.prototype in TypeScript

To extend String.prototype in TypeScript:

1. Create a string.extensions.ts file.
2. Extend the String interface and add the extension method.
3. Import the extension method as import './string.extensions' before using it.

Here is the content of string.extensions.ts:

Copied!
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface String {
  prefix(pre: string): string;
}

String.prototype.prefix = function (pre: string) {
  return pre + this;
};

And here is how we import and use the new prefix method on the String prototype:

Copied!
import './string.extensions';

const str = 'world';

console.log(str.prefix('hello ')); // 👉️ "hello world"

If I run my index.ts file, we can see that the prefix method gets successfully invoked.

In the interface, we created a prefix method, which adds leading characters to the original string and returns the result.

You could use this approach to extend String.prototype with any method. Here is an example of a method that adds the passed-in strings together.

This is the code in the string.extensions.ts file:

Copied!
interface String {
  add(...strings: string[]): string;
}

String.prototype.add = function (...strings) {
  return this + strings.join('');
};

And here is the index.ts file, which imports string.extensions and makes use of the add method.

Copied!
import './string.extensions';

const str = 'hello';

// 👇️ "hello one two three"
console.log(str.add(' one', ' two', ' three'));

Make sure to specify the correct path when importing the string.extensions.ts module.

Here is an example of how you would override the built-in toLowerCase() method.

Copied!
interface String {
  toLowerCase(): string;
}

String.prototype.toLowerCase = function () {
  return this.toUpperCase();
};

And here is the code in our index.ts file.

Copied!
import './string.extensions';

const str = 'Hello World';

// 👇️ "HELLO WORLD"
console.log(str.toLowerCase());

Note that overriding built-in methods is confusing and should generally be avoided.

I've also written an article on how to extend Array.prototype in TS.

# Table of Contents

1. Extend Object.prototype in TypeScript
2. Extend Date.prototype in TypeScript
3. Extend Number.prototype in TypeScript

# Extend Object.prototype in TypeScript

To extend Object.prototype in TypeScript:

1. Create an object.extensions.ts file.
2. Extend the Object interface and add the extension method.
3. Import the extension method as import './object.extensions' before using it.

Here is the content of object.extensions.ts:

Copied!
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface Object {
  // 👇️ function log - no parameters, returns object
  log(): Record<string, unknown>;
}

// 👇️ Don't use an arrow function
Object.prototype.log = function () {
  console.log(this);

  return this as Record<string, unknown>;
};

And here is how we import and use the new log method on the Object prototype:

Copied!
import './object.extensions';

const obj = {
  name: 'Tom',
  age: 30,
};

obj.log();

If I run my index.ts file, we can see that the log method gets successfully invoked.

In the interface, we created a log method, which returns an object with string keys and unknown values.

The method simply logs the object and returns it.

You could use this approach to extend Object.prototype with any method. Here is an example that implements a merge method that merges 2 objects.

This is the code in the object.extensions.ts file:

Copied!
interface Object {
  merge(obj: Record<string, unknown>): Record<string, unknown>;
}

Object.prototype.merge = function (obj: Record<string, unknown>) {
  return { ...this, ...obj };
};

And here is the index.ts file, which imports object.extensions and makes use of the merge method.

Copied!
import './object.extensions';

const obj = {
  name: 'Tom',
  age: 30,
};

const merged = { country: 'Chile', city: 'Santiago' }.merge(obj);

// 👇️ {country: 'Chile', city: 'Santiago', name: 'Tom', age: 30}
console.log(merged);

Make sure to specify the correct path when importing the object.extensions.ts module.

Here is the original Object interface:

Copied!
interface Object {
    constructor: Function;

    toString(): string;

    toLocaleString(): string;

    valueOf(): Object;

    hasOwnProperty(v: PropertyKey): boolean;

    isPrototypeOf(v: Object): boolean;

    propertyIsEnumerable(v: PropertyKey): boolean;
}

For example, here is how you would override the built-in toString() method.

Copied!
interface Object {
  toString(): string;
}

Object.prototype.toString = function () {
  return 'hello';
};

And here is the code in our index.ts file.

Copied!
import './object.extensions';

const obj = {
  name: 'Tom',
  age: 30,
};

console.log(obj.toString()); // 👉️ "hello"

Note that overriding built-in methods is confusing and should generally be avoided.

# Table of Contents

1. Extend Date.prototype in TypeScript
2. Extend Number.prototype in TypeScript

# Extend Date.prototype in TypeScript

To extend Date.prototype in TypeScript:

1. Create a date.extensions.ts file.
2. Extend the Date interface and add the extension method.
3. Import the extension method as import './date.extensions' before using it.

Here is the content of date.extensions.ts:

Copied!
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface Date {
  getTimestamp(): number;
}

Date.prototype.getTimestamp = function () {
  return this.getTime();
};

And here is how we import and use the new getTimestamp method on the Date prototype:

Copied!
import './date.extensions';

const date = new Date('2022-09-24');

// 👇️ 1663977600000
console.log(date.getTimestamp());

If I run my index.ts file, we can see that the getTimestamp method gets successfully invoked.

In the interface, we created a getTimestamp method, which returns the number of milliseconds since the UNIX epoch.

You could use this approach to extend Date.prototype with any method. Here is an example of a method that formats the date as yyyy-mm-dd.

This is the code in the date.extensions.ts file:

Copied!
interface Date {
  format(): string;
}

Date.prototype.format = function () {
  return formatDate(this);
};

function padTo2Digits(num: number) {
  return num.toString().padStart(2, '0');
}

function formatDate(date: Date) {
  return [
    date.getFullYear(),
    padTo2Digits(date.getMonth() + 1),
    padTo2Digits(date.getDate()),
  ].join('-');
}

And here is the index.ts file, which imports date.extensions.ts and makes use of the format method.

Copied!
import './date.extensions';

const date = new Date('2022-09-24');

// 👇️ "2022-09-24"
console.log(date.format());

Make sure to specify the correct path when importing the date.extensions.ts module.

Here is an example of how you would override the built-in getFullYear() method.

Copied!
interface Date {
  getFullYear(): number;
}

Date.prototype.getFullYear = function () {
  return 100;
};

And here is the code in our index.ts file.

Copied!
import './date.extensions';

const date = new Date('2022-09-24');

// 👇️ 100
console.log(date.getFullYear());

Note that overriding built-in methods is confusing and should generally be avoided.

# Extend Number.prototype in TypeScript

To extend Number.prototype in TypeScript:

1. Create a number.extensions.ts file.
2. Extend the Number interface and add the extension method.
3. Import the extension method as import './number.extensions' before using it.

Here is the content of number.extensions.ts:

Copied!
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface Number {
  sum(a: number): number;
}

Number.prototype.sum = function (a: number) {
  return Number(this) + a;
};

And here is how we import and use the new sum method on the Number prototype:

Copied!
import './number.extensions';

const num = 100;

console.log(num.sum(5000)); // 👉️ 5100

If I run my index.ts file, we can see that the sum method gets successfully invoked.

In the interface, we created a sum method, which adds 2 numbers and returns the result.

You could use this approach to extend Number.prototype with any method. Here is an example of a method that adds leading zeros to a number.

This is the code in the number.extensions.ts file:

Copied!
interface Number {
  addLeadingZeros(): string;
}

Number.prototype.addLeadingZeros = function () {
  return padToDigits(Number(this), 5);
};

function padToDigits(num: number, totalLength: number) {
  return num.toString().padStart(totalLength, '0');
}

And here is the index.ts file, which imports number.extensions and makes use of the addLeadingZeros method.

Copied!
import './number.extensions';

const num = 100;

// 👇️ "00100"
console.log(num.addLeadingZeros());

Make sure to specify the correct path when importing the number.extensions.ts module.

This is what the original Number interface looks like:

Copied!
interface Number {
    toString(radix?: number): string;

    toFixed(fractionDigits?: number): string;

    toExponential(fractionDigits?: number): string;

    toPrecision(precision?: number): string;

    valueOf(): number;
}

Here is an example of how you would override the built-in toString() method.

Copied!
interface Number {
  toString(): string;
}

Number.prototype.toString = function () {
  return 'hello world';
};

And here is the code in our index.ts file.

Copied!
import './number.extensions';

const num = 100;

// 👇️ "hello world"
console.log(num.toString());

Note that overriding built-in methods is confusing and should generally be avoided.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Property does not exist on type String in TypeScript [Fixed]
• Property does not exist on type '{}' in TypeScript [Solved]
• How to Extend one or Multiple Interfaces in TypeScript
• How to extend a Type in TypeScript