Category: TypeScript

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.

Sometimes, we want to fix the ‘Cannot invoke an expression whose type lacks a call signature’ error in TypeScript.

In this article, we’ll look at how to fix the ‘Cannot invoke an expression whose type lacks a call signature’ error in TypeScript.

How to fix the ‘Cannot invoke an expression whose type lacks a call signature’ error in TypeScript?

To fix the ‘Cannot invoke an expression whose type lacks a call signature’ error in TypeScript, we can cast the types of the variable so that the TypeScript compiler knows that the types of the object are compatible with the objects we have.

For instance, we write

interface Apple {
  color: string;
  isDecayed: boolean;
}

interface Pear {
  weight: number;
  isDecayed: boolean;
}

//...
const freshFruits = (fruits as (Apple | Pear)[]).filter(
  (fruit: Apple | Pear) => !fruit.isDecayed
);

to cast the fruits array to type (Apple | Pear)[] so that the TypeScript compiler knows the fruits has objects that are either of type Apple or type Pear.

Likewise, we set the fruit parameter in the callback to Apple | Pear so that the TypeScript compiler knows that fruit is either an Apple or a Pear.

Then we can access the isDecayed property without errors since it’s specified in both interfaces.

Conclusion

To fix the ‘Cannot invoke an expression whose type lacks a call signature’ error in TypeScript, we can cast the types of the variable so that the TypeScript compiler knows that the types of the object are compatible with the objects we have.

Sometimes, we want to declare multiple TypeScript variables with the same type.

In this article, we’ll look at how to declare multiple TypeScript variables with the same type.

How to declare multiple TypeScript variables with the same type?

To declare multiple TypeScript variables with the same type, we can use array destructuring.

For instance, we write

const [x, y]: number[] = [1, 2];

to declare the x and y variables and make them both numbers by setting the array’s type to number[].

Then the TypeScript compiler will infer that both variables’ types are number.

Conclusion

To declare multiple TypeScript variables with the same type, we can use array destructuring.