Author: John Au-Yeung

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.

Sometimes, we want to fix the "error TS2339: Property ‘for’ does not exist on type ‘HTMLProps’" error with TypeScript.

In this article, we’ll look at how to fix the "error TS2339: Property ‘for’ does not exist on type ‘HTMLProps’" error with TypeScript.

How to fix the "error TS2339: Property ‘for’ does not exist on type ‘HTMLProps’" error with TypeScript?

The "error TS2339: Property ‘for’ does not exist on type ‘HTMLProps’" error with TypeScript, we should replace the for prop with the htmlFor prop.

For instance, we write

const Input = (props) => {
  //...
  return (
    <label htmlFor={props.inputId} className="input-label">
      {props.label}
    </label>
    //...
  );
};

to set the label‘s for attribute by setting the htmlFor prop to a value.

Conclusion

The "error TS2339: Property ‘for’ does not exist on type ‘HTMLProps’" error with TypeScript, we should replace the for prop with the htmlFor prop.

Sometimes, we want to tell TypeScript compiler to remove certain types from an array with Array.prototype.filter.

In this article, we’ll look at how to tell TypeScript compiler to remove certain types from an array with Array.prototype.filter.

How to tell TypeScript compiler to remove certain types from an array with Array.prototype.filter?

To tell TypeScript compiler to remove certain types from an array with Array.prototype.filter, we can create our own type guard function and use that as the filter method’s callback.

For instance, we write

const arr = [1, 2, 3, 4, "5", 6];
const numArr: number[] = arr.filter((i): i is number => {
  return typeof i === "number";
});

to call arr.filter with

(i): i is number => {
  return typeof i === "number";
}

i is number is a return type that returns a boolean that tells us if the parameter i is a number or not.

Then numArr would be an array with only numbers.

Conclusion

To tell TypeScript compiler to remove certain types from an array with Array.prototype.filter, we can create our own type guard function and use that as the filter method’s callback.

Sometimes, we want to define CSS variables in style attribute in React and TypeScript.

In this article, we’ll look at how to define CSS variables in style attribute in React and TypeScript.

How to define CSS variables in style attribute in React and TypeScript?

To define CSS variables in style attribute in React and TypeScript, we can create an object of type React.CSSProperties in our component.

For instance, we write

const App = () => {
  //...
  const style = { "--my-css-var": 10 } as React.CSSProperties;
  return <div style={style}>...</div>;
};

to create the style variable of type React.CSSProperties.

Then we can assign that as the value of the style prop of the div without compiler errors.

Conclusion

To define CSS variables in style attribute in React and TypeScript, we can create an object of type React.CSSProperties in our component.