Author: John Au-Yeung

Sometimes, we want to extend String prototype with TypeScript.

In this article, we’ll look at how to extend String prototype with TypeScript.

How to extend String prototype with TypeScript?

To extend String prototype with TypeScript, we can add our entries to the String interface in a .d.ts file in our project.

For instance, we write

declare global {
  interface String {
    padZero(length: number): string;
  }
}

in a .d.ts file to add the padZero method into the String interface.

Then we can add the padZero method into the String prototype without errors by writing

String.prototype.padZero = function (this: string, length: number) {
  const s = this;
  while (s.length < length) {
    s = "0" + s;
  }
  return s;
};

We add this as a parameter of the function and set it to string.

The this parameter will be discarded when the code is compiled into JavaScript.

Conclusion

To extend String prototype with TypeScript, we can add our entries to the String interface in a .d.ts file in our project.

Sometimes, we want to fix the "The left -hand and right hand side of an arithmetic operation must be of type ‘any’, ‘number’ or an enum type" error with TypeScript.

In this article, we’ll look at how to fix the "The left -hand and right hand side of an arithmetic operation must be of type ‘any’, ‘number’ or an enum type" error with TypeScript.

How to fix the "The left -hand and right hand side of an arithmetic operation must be of type ‘any’, ‘number’ or an enum type" error with TypeScript?

To fix the "The left -hand and right hand side of an arithmetic operation must be of type ‘any’, ‘number’ or an enum type" error with TypeScript, we should make sure all the operands we use with arithmetic operators are numbers.

For instance, if we’re subtracting 2 timestamps, we should make sure they’re both timestamps by calling the getTime method with the Date instances.

So we write

const d = Math.abs(new Date().getTime() - new Date(lastConnect).getTime());

to call getTime with both Date instances to return the timestamps before we subtract them.

Conclusion

To fix the "The left -hand and right hand side of an arithmetic operation must be of type ‘any’, ‘number’ or an enum type" error with TypeScript, we should make sure all the operands we use with arithmetic operators are numbers.

For instance, if we’re subtracting 2 timestamps, we should make sure they’re both timestamps by calling the getTime method with the Date instances.

Sometimes, we want to fix isNan only accepting a number with TypeScript.

In this article, we’ll look at how to fix isNan only accepting a number with TypeScript.

How to fix isNan only accepting a number with TypeScript?

To fix isNan only accepting a number with TypeScript, we should remove isNaN with checking the variable’s type with the typeof operator and replace isNaN with Number.isNaN and Number.

For instance, we write

if (typeof expectedValue === "string" && !Number.isNaN(Number(expectedValue))) {
  expectedValue = Number(expectedValue);
}

to use typeof expectedValue === "string" to check if expectedValue is a string.

Then we try to convert expectedValue to a number with Number(expectedValue).

And finally we call Number.isNaN to check if the value returned by Number is NaN or not.

Conclusion

To fix isNan only accepting a number with TypeScript, we should remove isNaN with checking the variable’s type with the typeof operator and replace isNaN with Number.isNaN and Number.

Sometimes, we want to extend an array in TypeScript.

In this article, we’ll look at how to extend an array in TypeScript.

How to extend an array in TypeScript?

To extend an array in TypeScript, we can add the method to Array.prototype and add the method to the Array interface.

For instance, we write

interface Array<T> {
  remove(o: T): Array<T>;
}

Array.prototype.remove = function (o) {
  // ...
  return this;
};

to add the remove method to the Array<T> interface.

Then we set Array.prototype.remove to a method that removes the entry from the current array, which is the value of this.

Then we return this which is the array without o.

If the code is in a module, we also need to add the remove property to the Array interface in a type declaration file.

For instance, in a .d.ts file, we write

declare global {
  interface Array<T> {
    remove(o: T): Array<T>;
  }
}

to add remove to it.

Conclusion

To extend an array in TypeScript, we can add the method to Array.prototype and add the method to the Array interface.

Sometimes, we want to fix the "Cannot find name" errors in React components with TypeScript.

In this article, we’ll look at how to fix the "Cannot find name" errors in React components with TypeScript.

How to fix the "Cannot find name" errors in React components with TypeScript?

To fix the "Cannot find name" errors in React components with TypeScript, we should rename any files with the .ts extension to .tsx.

We need to rename them so that the TypeScript compiler knows that the files can contain JSX code, which it isn’t expecting in .ts files.

Conclusion

To fix the "Cannot find name" errors in React components with TypeScript, we should rename any files with the .ts extension to .tsx.