Author: John Au-Yeung

Sometimes, we want to set the return type for the array map method callback in TypeScript.

In this article, we’ll look at how to set the return type for the array map method callback in TypeScript.

How to set the return type for the array map method callback in TypeScript?

To set the return type for the array map method callback in TypeScript, we can set the return type of the callback with type assertion.

For instance, we write

interface IKeys {
  key1: string;
  key2: string;
}
array.map(
  (val) =>
    <IKeys>{
      key1: val.key1,
      key2: val.key2,
    }
);

to create the IKeys interface.

Then we call array.map with a callback that returns an IKeys object.

We set the return type of the callback with <IKeys> in front of the callback.

Conclusion

To set the return type for the array map method callback in TypeScript, we can set the return type of the callback with type assertion.

Sometimes, we want to use styled-components with props and TypeScript.

In this article, we’ll look at how to use styled-components with props and TypeScript.

How to use styled-components with props and TypeScript?

To use styled-components with props and TypeScript, we can create our own interface and use that as the type argument for the styled element function.

For instance, we write

interface Props {
  onPress: any;
  src: any;
  width: string;
  height: string;
}

const Icon = styled.Image<Props>`
  width: ${(p) => p.width};
  height: ${(p) => p.height};
`;

to use the styled.Image tag with the Props interface as the type argument.

And then we can get the width and height properties from the p prop parameter without errors.

Conclusion

To use styled-components with props and TypeScript, we can create our own interface and use that as the type argument for the styled element function.

Sometimes, we want to mock the useHistory hook in Jest and TypeScript.

In this article, we’ll look at how to mock the useHistory hook in Jest and TypeScript.

How to mock the useHistory hook in Jest and TypeScript?

To mock the useHistory hook in Jest and TypeScript, we can mock the react-router-dom module.

For instance, we write

jest.mock("react-router-dom", () => ({
  useHistory: () => ({
    push: jest.fn(),
  }),
}));

in our test file to call jest.mock with the module name and a function that returns the mocked module contents.

In the object returned, we add the useHistory property and set it to a function that returns an object that has the push function set to a mock function returned by jest.fn.

Conclusion

To mock the useHistory hook in Jest and TypeScript, we can mock the react-router-dom module.

To fix the "Property does not exist on type ‘DetailedHTMLProps, HTMLDivElement>’" error with React and TypeScript, we can extend the react module’s types using a declare statement.

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

declare module "react" {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    custom?: string;
  }
}

to add the custom property into the HTMLAttributes interface.

Then we can add the custom attribute into the HTML elements in our React project.

Sometimes, we want to add the type for Image with TypeScript.

In this article, we’ll look at how to add the type for Image with TypeScript.

How to add the type for Image with TypeScript?

To add the type for Image with TypeScript, we should use the HTMLImageElement for Image instances.

For instance, we write

const image: HTMLImageElement = new Image();

to set image to the HTMLImageElement.

Image files selected from an input should have the File type and URL strings for images should have the string type.

Conclusion

To add the type for Image with TypeScript, we should use the HTMLImageElement for Image instances.