Type 'void' is not assignable to type '{}'.ts(2322) TypeScript Error Fixed

 

Error Message

Type 'void' is not assignable to type '{}'.ts(2322)

use-store-modal.tsx(5, 11): The expected type comes from the return type of this signature.

use-store-modal.tsx(11, 11): Did you mean to mark this function as 'async'?

Error is shown in the picture code 

TypeScript error ts (2322) shown

 Error is shown in detail

Detail TypeScript error ts (2322) 

Solution shown in the picture code just convert the function into void

TypeScript error ts (2322) Solution

Or follow the procedure given below

The error message indicates that there is an issue with the return type of a function in the use-store-modal.tsx file. It seems that the function is expected to return an object, but it is returning void instead.

To fix this error, you can update the function to explicitly specify the return type as an object or modify the implementation to return an object with the expected properties. Here's an example of how you can update the code:

import { useState } from 'react';

export const useStoreModal = () => {

  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => {

    setIsOpen(true);

  };

  const closeModal = () => {

    setIsOpen(false);

  };

  return {

    isOpen,

    openModal,

    closeModal,

  };

};

In this example, the useStoreModal function returns an object with three properties: isOpen, openModal, and closeModal. Ensure that the return type matches the expected type in the consuming component to resolve the error.

Want to Learn  Next.js, TypeScript, Tailwind CSS then watch this video https://youtu.be/rftadFuDmC8

Learn to Build a Calculator App with Next.js, TypeScript, Tailwind CSS, and Deploy on Vercel